Step 1: How to Create Links / Hyperlinks

Transcription

1 Step 1: How to Create Links / Hyperlinks Links allow you to use text or images to link a site visitor to another page or file either on your site or on another site. To learn how to create links, watch this short video or continue reading below. Choose the kind of link you want to create: I Want to Create a Link Using Text I Want to Create a Link Using a Picture Text Links To create a text link, first highlight the text you want to use for the link. Then click the "chain link" icon in the text toolbar. This will open the link dialog box, where you can select the kind of link you'd like to create. You can:

2 Link to another page on your own site. Just select the page you want from the dropdown menu. Link to a page on another site. You can even choose to have the link open in a new window (so that the visitor is not redirected from your own site when they click it) by checking the provided box.

3 Link to a file so it can be downloaded. You can select a file from the drop-down menu or upload a new one. Link to an address. This makes will cause the visitor's mail program (like Outlook or Apple Mail) to open so they can write you directly. Note that if the visitor is not using one of these programs, the link won't work and they'll just need to copy your address or use a Contact Form if you have one on the site.

4 When you've created your link, click Save and then Publish the site to test it. You can also click on any link in the editor to see where it leads and to remove it if needed. Picture Links To create a picture link, first click the image you want to use for the link. Then click the Set Link option in the picture toolbar.

5 This will open the link dialog box, where you can select the kind of link you'd like to create. You can: Link to a larger version of the image. Just click Save if this is what you'd like to do. Link to another page on your own site. Just select the page you want from the dropdown menu.

6 Link to a page on another site. You can even choose to have the link open in a new window (so that the visitor is not redirected from your own site when they click it) by checking the provided box. Link to a file so it can be downloaded. You can select a file from the drop-down menu or upload a new one.

7 Link to an address. This makes will cause the visitor's mail program (like Outlook or Apple Mail) to open so they can write you directly. Note that if the visitor is not using one of these programs, the link won't work and they'll just need to copy your address or use a Contact Form if you have one on the site. When you've selected the link you want, just Save and then Publish the site to test it.

8 Step 2: Add Anchor / Internal Links Anchor links enable you to link from one part of a page to another (just like the links found at the top of this page). All it takes to pull this off is a little basic HTML. To show how it works, let s look at how the anchor links for this page were created. The first step to creating anchor links is to create anchors on different parts of the page. These anchor names are used when creating your links. The HTML of an Anchor Name Looks like this: <a name="background"></a> To add these anchors to a page on your site, drag the Custom HTML element to just above the areas where you want to link. Then enter HTML like what we see above, using a simple name for the anchor so you can easily remember it later. In this example, we ve added anchor names just above the Change Background, Advanced Font Changes, Change Navigation Fonts and Create Anchor Links titles. Like in these two examples:

9 With the anchor names in place, we can add the links to these anchors. Unlike normal links, these links have to be added via the Custom HTML Element. These example links have been placed in a basic list. I've set a font size because list fonts do not take on the font size of the rest of the content. The above pictured code gives us links like this: To see how well these Anchor links work, just scroll to the top of the page and try them out.

10 These are obviously just some basic changes that can be made by altering the CSS and HTML of the site. Get some other ideas from our Widgets and Other Content section and learn more about the basics of HTML / CSS from the W3C Schools excellent (and free) website. And do note again that our very knowledgeable, but small support staff is unable to provide direct support for questions about changes to HTML and CSS. They have to limit their support to the editor itself. Step 3: Upload PDFs, Powerpoint Slides and other Docs You can upload and link to pretty much any kind of document (allowing site visitors to download it). You also have the option to embed a document so it is directly visible on a page. Here's how to do both. Link to a Document (or Other File) You can create a link to a document either by highlighting the text you want to link or clicking on an image. Then selecting the appropriate link option for either. If you're linking text, it'll look like this: If you're linking an image, it'll look like this:

11 Either option will open a link dialog box from where you'll need to select the File tab on the left and then click the Upload a File button. And then select the file you want to upload from your computer.

12 Then you're all done. The link will only be live and clickable on your Published site. It won't work in the editor. See the end results by downloading this PDF map of Golden Gate Park. Embed a Document to a Page You have the option to embed a PDF, Word file or other document directly to a page using our Embedded Document element. Drag the element to a page (you can find it under the Multimedia section of Elements):

13 Click the indicated area of the element and the select the Upload new File option from the toolbar.

14 Then select the file you want to upload from your computer. Give the file a little time to upload and you're all done! See the example below to get an idea of how it works. Note that the Download link in the element does not work. This is an issue with Scribd that we're working with them to fix. In the meantime, if you need to create a download link for the file you should use the instructions at the beginning of this article.