Inserting links

You can insert links in your site pages, page templates, emails, and event descriptions, so that visitors to your site can click the links and...

• jump to another page on your site
• jump to a specific section within the same page or another page on your site
• jump to another site, or
• send an email

The link can appear as text...

...as a button....

...or as a picture.

For instructions on inserting links to documents and other files, see Inserting documents.

Inserting a link

You can insert a link in a content gadget on either a site page or a page template, and in emails and event descriptions. To insert a link, follow these steps:

1. Begin editing the site page, page template, email, email template, or event description.
2. Click within the content gadget, email body, or event description where you want the link to appear. The content editor toolbar should now appear at the top of the screen.
3. If you want the link to appear as text or a button, either select the text within the gadget or click where you want the text to appear. (You can specify the link text in a subsequent step.) If you want to link a picture, click the picture within the page.
4. Click the Link dropdown in the toolbar towards the top of the page and select Insert link.
   
5. From the Insert link window that appears, you choose where the link should go to.
   The following options are available.
   
   Website/Email
   Enter an email address or the URL of another website. There are separate instructions for linking to encoded email addresses (see below).
   
   Site page
   Link to another page on your Wild Apricot site.
   
   Event
   Link to the detail page or registration form for one or your events. Select the event from the list of past and upcoming events. Choose whether to link to the event's detail page or registration page.
6. Choose whether you want the linked page to open in a new window or the same window.
7. If you want the link to appear as a button within a page or page template, click the Style drop-down and select a button style.
   
   The available styles vary depending on your current website theme.
8. Specify a tooltip to be displayed when a mouse pointer is positioned over the link text or picture.
9. If you want to display a text link, you can specify the link text (unless you selected the text before selecting the Insert link option).
10. When you are done defining the link, click Insert Link.

You can also link to another section within the same page or another page by inserting an anchor on the page then linking to it. For more information, see Inserting an anchor and Linking to an anchor, below.

Modifying and removing a link

To modify a text link while in edit mode, select any portion of the link then click the Link dropdown and select Edit link.

From the window that appears, you can change the link destination and the tooltip, and whether the link opens in a new window. You can also click the Unlink button to remove the link.

To modify a picture link, enter edit mode then hover over the picture and click Link.

From the window that appears, you can change the link details or click Unlink to remove the link.

You can also remove the link by clicking the unlink icon that appears in the upper right corner of the image when you hover over it.

Inserting an anchor or bookmark

If you have a long web page or email, you may want to provide links to individual sections within the page so visitors can jump right to those sections. You might also provide a link to jump to the top of the page. 

Before you can link to a section within a page, you have to mark the section by inserting an anchor (sometimes called a bookmark).

To insert an anchor, follow these steps:

1. Begin editing the site page or page template where you want the anchor to appear.
2. Click the content gadget in which you want the anchor to appear.
3. Within the content gadget, click where you want the anchor to appear.
4. Click the Link dropdown in the toolbar and select Insert anchor.
   
5. In the window that appears, enter the anchor name – a keyword to identify the anchor (without spaces).
   
6. Click Insert anchor.

The anchor is represented in edit mode by an anchor icon.

To hide anchor icons from appearing on any of your pages in edit mode, click the Link dropdown and select Show/hide anchors.

Now that you have inserted an anchor, you can link to it from this page or another Wild Apricot page.

Linking to an anchor

You can link to an anchor in an email, to an anchor on the same web page or a different page. The link can be in a different content gadget than the anchor within the same page.

Links to anchors within an email will not work on mobile email readers.

Linking to an anchor on the same page

To add a link to an anchor on the same page, follow these steps:

1. Select the text or picture you want to use as the link.
2. Click the Link button in the toolbar and select Insert link to anchor.
3. In the window that appears, enter the name of the anchor you want to link to, and optionally, the tooltip you want to appear when a mouse pointer is positioned over the link text or picture.
   
4. Click Insert link.

Linking to an anchor on another page

To add a link to an anchor on another Wild Apricot page, follow these steps:

1. Select the text or picture you want to use as the link.
2. Click the Link button and select Insert link.
3. Select or enter the address of the other page, either by clicking on the page name on the Site page tab, or by typing / then the name of the page on the Website/Email tab.
4. Click the Insert link button.
5. Click the HTML button, and find the <a href> tag for the link (e.g. <a href="/About">history of the Association</a>).
6. Add #anchorname to the end of the link destination (where anchorname is the name of the anchor). For example, if you want to link to a History anchor on a page with a custom URL of About, the link would be
   <a href="/About#History">your link text</a>.
7. Click Save to exit the Edit HTML window.
8. Click Save to save changes to the page.

Linking to encoded email addresses

Displaying your email address on your Wild Apricot site will expose it to spammers' email harvesting bots, even if you hide it behind link text. To reduce the chance of this, you can encode your email address so that bots can't see it but browsers can still interpret it.

Some email harvesting bots may still be able to interpret encoded email addresses.

To link to an encoded email address, follow these steps:

1. Go to a site that offers free email address encoding. Pick one that generates JavaScript code rather than HTML code. (If you use HTML, Wild Apricot's automatic code cleanup will convert the encoded address back to the actual address.)
2. Generate the JavaScript code to encode your email address and copy the code to your clipboard.
3. Begin editing the site page or page template where you want the link to appear.
4. Click the content gadget in which you want the link to appear.
5. Within the content gadget, click where you want the link to appear.
6. Click the S (Snippet) button within the toolbar at the top.
7. Within the code box, right click and select Paste.
8. Click Save to exit the window.
9. Click Save to save changes to the page.

In edit mode, the link is represented using a code snippet icon:

On your site page, the link will be displayed using the link text you have specified.

If you're using Enkoder and the link does not work, contact Wild Apricot support for help adjusting the Enkoder embed code.