Knowledgebase

To make something clickable, select it, go to Inspector > Hyperlinks, tick Enable as Hyperlink, and choose where it goes in Link To. You can link text, a picture, a shape or a button.

Make a link

1. Select what people will click:
   • A few words in a text box: double-click inside the text box, then highlight only those words.
   • A whole picture, shape, button or text box: click it once.
2. Click Inspector at the top right, then the Hyperlinks tab (the fifth icon).
3. Tick Enable as Hyperlink.
4. In Link To, choose the type of link from the table below and fill in the details.
5. Click Preview in the toolbar and test the link, then publish.

Open in a new tab: set Behavior to Open in New Window. Open in Popup Window shows the page in a box over the current page: see How do I open a popup window or enlarge a photo when someone clicks?.

Link colours: for text links, set the colours and underline for each state under Hyperlink Formatting in the same tab.

Link to a PDF or other file

1. Select the text or button, tick Enable as Hyperlink, and set Link To to A File.
2. Click Choose.... A list of files already in your project appears. Pick one, or choose Choose... again to pick a new file from your computer.
3. To have the file download instead of opening in the browser, tick Force download under Additional Settings. Some browsers ignore this setting and open the file anyway.

EverWeb copies the file into your project (it appears under External Files in the Assets tab) and sends it to your website when you publish. Visitors get it from your website, not from your computer.

To update the file later without changing the link, replace it in the Assets list: see Replace an image or PDF everywhere at once, and clear out files you no longer use (the Assets list).

Link to a section further down a page

A section link scrolls the visitor to a spot you've marked (a Scroll Position, sometimes called an anchor).

1. Mark the spot:
   • Any page: select the object at the top of the section, such as its heading or its Container. Click Scroll Position in the toolbar and choose Set Selected Shape as Scroll Position.... Type a name, such as Prices, and click OK. An anchor symbol appears on the object.
   • Fixed-width (Centered Layout) pages only: you can instead click Scroll Position in the toolbar, choose Insert Fixed Scroll Position, and drag the blue line to where the section starts. Name it under Inspector > Widget Settings.
2. Link to it: select the button or text, tick Enable as Hyperlink, set Link To to One of My Pages, choose the page, then choose your Scroll Position name in Position.
3. Preview and test.

If the page scrolls slightly too far, check that the section isn't in one very long text box (split it into one text box per section), and that your fonts are included on your website. See My fonts look different on other computers: Google Fonts and using your own font.

To make a menu that jumps to sections of one long page, the most reliable way is to build it from text boxes or buttons and link each one as above.

Make something happen when clicked (On Click Actions)

On Click Actions make a click do something on the page itself instead of going somewhere, such as playing a video or showing a box. Give the object you want to control a name in Inspector > Widget Settings, then select the button, open On Click Actions in the Hyperlinks tab, choose an Action and that Element, and click Add. For a worked example, see How do I open a popup window or enlarge a photo when someone clicks?.

Common problems

EverWeb warns that the link will be applied to the entire object. You're about to link the whole text box, rather than only your words. This happens when you haven't double-clicked into the text, or when the whole text box is already a link. Click the text box once and untick Enable as Hyperlink if it's ticked. Then double-click inside it, highlight your words, and link them.

You want to put a link to another website in your Navigation Menu. In EverWeb 4.6 and later, add it under Extra Menu Links in the Navigation Bar's Widget Settings. In 4.5 the menu only lists pages in your project. See How to put a link to another website in EverWeb's navigation menu.

You need the address of a page that isn't in your menu. To link to it from your own site, use One of My Pages: it works for every page. To share it elsewhere, the address is your website address followed by the page's File Name (in Inspector > Page Settings), for example https://www.example.com/contact.html. Pages inside a directory have the directory's name in between. Or publish, click through to the page in your browser and copy the address bar.

A phone number shows blue on an iPhone. iPhones make phone numbers into links on their own, in their own colour. Make the number a tel: link yourself (see the table) and set its colours under Hyperlink Formatting.

A link works in Preview but not online, or the other way round. Publish again with File > Publish Entire Site, then check in a private window so you're not seeing your browser's saved copy.

Related articles

• How to put a link to another website in EverWeb's navigation menu
• How do I open a popup window or enlarge a photo when someone clicks?
• Replace an image or PDF everywhere at once, and clear out files you no longer use (the Assets list)
• When I changed my link colors, they don't appear changed when previewing
• What's the difference between Publish and Publish Entire Site?