Using Anchor Links In the Premium Web Builder

Example of an Anchor link

Anchor 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 tutorial

    Anchor 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 text

    Highlight 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 toolbar

    Next, go to the toolbar in the Builder and click on the button that looks like an anchor.

  7. Name the anchor

    Click 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 anchor

    When 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 button

    The 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

AC
Arnel Custodio Content Writer I

As a writer for InMotion Hosting, Arnel has always aimed to share helpful information and provide knowledge that will help solve problems and aid in achieving goals. He's also been active with WordPress local community groups and events since 2004.

More Articles by Arnel

Thoughts on “Using Anchor Links In the Premium Web Builder

    • Hello David,

      I am not sure to which screenshot you are referring as they are all on the right. On which step are you stuck?

      Kindest Regards,
      Scott M

Was this article helpful? Let us know!