Introduction
This tutorial will explain how to add links to your Web pages. Creating links allows you to direct your site's visitors to separate pages within your Digital Bell site, Web pages from external site, as well as specific locations within your own Digital Bell pages.
There are three methods for adding links, which are discussed in this tutorial. The fist allows you to highlight a word or section of text in a content element, such as a Text Block or Post, and hyperlink it to a different page. The second allows you to add a vertical list of links to your page, as a separate element. The third allows you to create what are known as "Anchor links," which direct visitors to a specific location on a page.
Method 1: Adding a Link to Text
Step 1 - Highlight your Content
While creating or editing text-based content, such as Posts or Text Blocks, highlight the word or phrase you would like to turn into a link. In the example image below, the word "Content" is highlighted.
Step 2 - Click the Insert/Edit Link Button
On the WYSIWYG toolbar, locate the"Insert/Edit Link" button (chain link icon), on the right side of the first row. With your word or phrase highlighted, click the button.
Finish - Enter URL or Search for an Internal Page
Clicking the button will create a new pop-up window. If you are creating a link to an external site, enter the URL into the "Link URL" field.
If you are linking to a page within your school or organization's Digital Bell Web site, click the "Pages" tab. Next, search for the page by "Title" or "Name," using the "Filter" field. From the list of results, click the page that you wish to link to.
Optionally, you can use the "Target" drop-down menu to select the destination for the link to open. If you wish for the link to open in the same window, leave the target as is (the default opens in the same window). If you wish for the link to open in a seperate window, click on the option "Open in new window (_blank)." Then click Insert to insert the link you created.
After entering the URL, or selecting the appropriate internal page (and, optionally, choosing the "Target"), click the "Insert" button at the bottom of the window to create your link.
Once the link has been created, finish editing or creating your content if necessary, then click the blue "Submit" button to save your changes.
Links can be edited by highlighting the linked text, then clicking the "Insert/Edit Link" button. Links can also be removed by highlighting the linked text, then clicking the "Unlink" button, located to the right of the "Insert/Edit Link" button.
Method 2: Creating a Link Group
Step 1 - Edit your Page
If you would like to add a separate list of links to your page, such as links to resources on external websites, you can use the the "Links" content element. An example of this is shown below the following tutorial.
Begin by clicking the "Pages" link, located in the menu at the top of your Digital Bell Dashboard. From the list, locate the page you wish to add the links to, then click the Edit button (pencil icon) to the left of the page title. This will bring you to the page's content editor.
Step 2 - Add a Link Group
Next, click the "Links" item, located under the "Add Content" heading in the right margin.
This will add a new Link Group to the bottom of your page. To reposition this group vertically, click the Move icon (four arrows), located in the upper left hand corner of the group, and drag the group to your preferred position on the page.
To add a title to your Link Group, click the "Click to add a Group Title" text to display the title field. Enter your preferred title, then click the "Submit" button once finished.
Step 3 - Adding Links
Once you have added the Link Group to your page, you can begin adding individual links. Click the "+New Link" button at the bottom of the group to bring up the "Add Link" form.
Complete and submit the Add LInk form to add a new link to your group.
Title: This will be the linked text that appears in the Link Group
URL: This is the address your visitors will be directed to when the title is clicked
Description: This setting is optional. The text entered here will be displayed below the title, when using the "Default" layout.
External: This determines the default behavior of the link. Selecting "Yes" will open the link in a new window or browser tab, while selecting "No" will open the link in the same window/tab.
Once you have completed the form, click the "Submit" button to add the link to the group.
Existing Links
If the link you would like to had has been added previously, click the "Existing LInk" button. This will bring up a double-pane selection window. Enter the title of the link in the search field - the results will be displayed in the left-hand pane.
Locate the appropriate link, then click the Select (arrow icon) button to move it to the right-hand pane. You can search for and select additional links, if necessary. Once all of the links have been selected, and are listed in the right-hand field, click the "Submit" button to complete the process.
Optional - Editing, Reordering, and Removing Links
Links that have been added to the group can be edited by mousing over the link to highlight it, and clicking anywhere within the highlighted area - this will bring up the "Edit Link" form, which includes the same options as the "Add Link" form.
To reorder a link within the group, first mouse over the link to display the Move icon (four arrows) in the upper right corner. Next, click and drag the icon vertically to move the link to your preferred position.
To remove a link from the group, mouse over the link and click the red "minus sign" icon in the upper right corner.
Method 3: Using "Anchor" Links
In addition to linking to pages and files, you can also link a visitor to a specific section of a page, using what are known as Anchor links. Anchor links are useful if you want to link visitors directly to a specific place or piece of content on a page. Anchor links can be used to reference a position on a different page, or used within the same page (ex. to return a visitor to the top of a page). There are two steps to the process - creating the Anchor, which will be the position on the page which your visitors are forwarded to, and creating the Anchor link which your visitors will click to be sent to the Anchor you have created.
Creating the Anchor
The first step in this process is placing the Anchor within your content. Unlike the links discussed in the above tutorials, no text needs to be highlighted to place the Anchor. Begin by editing the content element (Text Block, Post, or FAQ) where you would like to place an Anchor. Next, click the specific point in the "Content" field to place the cursor where the Anchor should be created - the position of your cursor where the Anchor is created will be the point on the page that the visitor is forwarded to. After placing the cursor, click the "Insert/Edit Anchor" button (anchor icon), located on the far right of the WYSIWYG toolbar's first row.
After clicking the button, a pop-up window will be displayed. Use the "Anchor Name" field to enter the name of the Anchor. Remeber the name you give your Anchor, as it will be used to create the finished Anchor link. After entering the name, click the "Insert" button. You should now notice a small anchor icon at the position of your cursor. Now that you have an Anchor, you can create an Anchor link, which will forward visitors to your Anchor, when clicked.
Placing the Anchor link on a different page will forward visitors to the page and position where the Anchor was placed. Placing an Anchor link on the same page will automatically scroll a visitor's browser window to the position where the Anchor was added.
Creating the Anchor Link
To create the Anchor link, you will need the URL of the page where the Anchor was added. You can get the full URL by clicking the "View on Website" button, located in the right margin, which will open the public version of the page in a new tab or window.
While viewing the public page, highlight and copy the URL that appears in the browser's address bar. This address will be used in conjuction with the Anchor name, when creating the finished Anchor link.
Once you have copied the URL, begin creating your link just as described in steps one and two of the "Adding a Link to Text" tutorial, above. At the point where you have highlighted your text, and clicked the "Insert/Edit Link" button, paste in the copied URL in the "Link URL" field. At the end of this URL, you will append a "pound sign"/"hashtag" ( # ) and the Anchor name, with no spaces.
For example, if your URL is "http://docs.digitalbellcms.com/index.cfm?p=links" and your Anchor name is "anchorpoint," the finished Anchor link would be "http://docs.digitalbellcms.com/index.cfm?p=links#anchorpoint." As an example of creating an Anchor link on the same page as the Anchor, clicking the example link in the previous sentence will automatically scroll your browser window to the beginning of the "Adding a Link to Text" tutorial.
Once you have entered the finished Anchor link URL, use the "Target" drop-down menu to select "Open in this window / frame" if the Anchor link is placed on the same page as the Anchor. If the Anchor link has been added to a different page, select "Open in new window (_blank). After selecting the "Target," click the "Insert" button to create your new Anchor link. Finally, click the "Submit" button to save your changes to the content.