Example of an Anchor linkAnchor links allow you to create points on your web page that will jump to another part of the page when you click on the link. Check out the screenshot at right to see an illustration of how an anchor link would work. If you want to see it working on a live website, check out Wikipedia.org. Each subject in the Wikipedia website has a content section that are anchor links to content within the page. The following tutorial will walk you through adding anchor links with text on a page in the Builder.

Creating Anchor Links

  1. Log into the Premium Website Builder.
  2. In order to add the anchor link so that you can see it in action, we will need to add a page where text can be added. Go to the PAGES section and then click on COMMON PAGE. You will need to click on the ">" button to add the page to "Your Site Structure". When the page is added, click on SAVE CHANGES in the top left hand corner.
  3. Next, click on EDIT (section 4) at the top of the screen and then select the common page you just added in the left hand column menu.
  4. Example of text for anchor text tutorialAnchor text is typically built using text, though it doesn't need to be that way. You can create a link to a section by using an element such as an image. For simplicity, we will use text in this tutorial. In order to use an anchor link, you typically need to plan where you want to place it. Click on the screenshot at right and you can see a typical structure for an anchor link. Add some text to your common page so that it is similar in format to the screenshot. It doesn't have to be exactly the same since we just want to be able to add links and anchors to for the tutorial. Add more space between the text that will be at the top of your document and the text that you are linking to at the bottom of the page. If you add this space, then when you test it, you will be better able to see the link jump when you click on it.
  5. Highlighted anchor textHighlight the first label of the two paragraphs by dragging your mouse across the text while holding your left-mouse button down.
  6. Select anchor button from toolbarNext, go to the toolbar in the Builder and click on the button that looks like an anchor.
  7. Name the anchorClick in the field that appears and give the anchor a name. The anchor is simply named "anchor1". After you name it, click on OK.
  8. Note anchor added to text used for anchorWhen you look at the screen you will see the symbol of an anchor placed near the text that you have selected. This is the point where the screen will jump to when you click on the anchor link. Scroll back to the top of the common page.
  9. Click on link buttonThe next step is to create the actual anchor link. At the top of the page highlight the text for the first bullet point. After you highlight the text, navigate to the toolbar and click on the insert link button.
  10. Click on link button You will see the link window appear. Click on the drop down arrow where it is labeled Link Type.
  11. Link window Look for where it says "Link to anchor in the text" in the drop-down menu and click on it to select it.
  12. You will then see the option to select the anchor that you have defined earlier. In this case it was called "anchor1". If you defined multiple anchors, then they will also be present in this list. Select the anchor text you defined earlier and click on OK. This will define the anchor link on your page.
  13. Click on the SAVE button to save your change.

If you want to see the link in action, make sure you have saved the page, then click on PREVIEW. Go to the common page where you added the anchor link and click on the Anchor link that you have defined. You'll see it jump down to your defined anchor link.

Anchor linkAfter link is clicked
Click on link Anchor text shown after anchor link selected
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2004
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5279

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!