Using Anchor Links In the Premium Web Builder
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
- Log into the Premium Website Builder.
- 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.
- 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.
- 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.
- Highlight the first label of the two paragraphs by dragging your mouse across the text while holding your left-mouse button down.
- Next, go to the toolbar in the Builder and click on the button that looks like an 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.
- 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.
- 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.
- You will see the link window appear. Click on the drop down arrow where it is labeled Link Type.
- Look for where it says "Link to anchor in the text" in the drop-down menu and click on it to select it.
- 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.
- 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 link||After link is clicked|
We value your feedback!
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.
new! - Enter your name and email address above and we will post your feedback in the comments on this page!
Linking in the Premium Web Builder
|1.||Using Anchor Links In the Premium Web Builder|
|2.||How do I add links to my sidebar in the Builder?|
|3.||Adding links to your pages in the sidebar of the Builder|
|4.||Adding Inline CSS to links in the Builder|
|5.||How do I remove links in my builder menu?|