I need help with creating anchor links. Can you provide step-by-step instructions?

Avatar
concentricvegan
  • Answered
I'm completely lost in creating anchor links. I've read all the tutorials I can find, but they are like a foreign language to me. I need step by step instructions.
Replies 1
Avatar
0
Arn
Hello Concentricvegan, I'm sorry to hear that you are confused about anchor links. Let's see if we can get you un-confused. First, I am not sure if you're using them in the Premium Web Builder, or not. Since you have posted it in the Builder Category, I will explain it with the Builder interface in mind. If you find that you are NOT using the interface, please post after my explanation and I can show how to create anchor links using code. First, let's start off with the definition of an anchor link. An anchor link is text that you can click on that links to another section of the webpage. If you click on the linked text, it jumps to the other section of the web page. If you want to see a website that uses MANY hyperlinks, check out wikipedia.org. When you look at their entries, you will see a lead paragraph, and then a block labeled CONTENTS. Each piece of text in the contents section link to a content section further down the page. Check out this example: Tornadoes in Wikipedia.org. Hopefully, this illustrates how an anchor link works. Each linked word in the Contents section is a link that jumps to section further down the page that is "anchored" so that you can separate long sections of text from a briefer outline of text. So let's try to build one using the Builder interface.
  1. Login to the Builder.
  2. Add a page with COMMON PAGE in the Pages section (section 3), then Save the site structure in the top left hand corner. You can see a screenshot here: Add Common Page. You need to click on the ">" button to add the page to "Your Site Structure".
  3. Next, click on EDIT (section 4) and then go to the common page that you just added.
  4. Anchor text is typically built around text, though it doesn't need to be that way. You can link to a section by using an element such as an image. We will use text in this tutorial. In order to use an anchor link, you typically need to plan where you want it to go. So, for example take a look at this screenshot. You can see that I have labeled 2 bullets as anchor text 1 and anchor text 2. Below you can see the paragraphs labeled with the roughly the same text. I intend to use the bullet text to link down to the paragraphs below. This is a typical use of anchor links. Add text structured similar to what you see in the screenshot. It doesn't have to be exact, we just want to be able to add links and anchors to text.
  5. Highlight the first label of the two paragraphs by dragging your mouse across the text while holding your left-mouse button down. Example of the highlighted text.
  6. Next, go to the toolbar in the Builder and click on the button that looks like an anchor. Click on the anchor button.
  7. Give the anchor a name. In this case, I'll just call it "anchor1". After you name it, click on OK.
  8. 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. The next step is to create the actual anchor link. Go back to the top of the page and highlight the text for the first bullet point.
  9. After you highlight the text, navigate to the toolbar and click on the insert link button. This will bring up the following window: Link window. Click on the drop down arrow where it is labeled Link Type. Look for where it says "Link to anchor in the text" and select it.
  10. You will see the option to select the anchor that you have defined earlier. In this case it was called "anchor1". Select the anchor and click on OK. This will define the anchor link on your page. It will look like this: Anchor link.
  11. Click on the SAVE button to save your change. You may want to add a large gap between the anchor link at the top of the page and the anchor text at the bottom. This way, you can SEE the jump. You can do this by simply clicking under the anchor link and adding a lot of space so that you don't see the text at the bottom of the page.
    12. 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 text 1 link. You'll see it jump down to the bottom link. I hope this tutorial helps you to understand how to build the anchor link! I will actually add this to our tutorials in the Support center as well for others to reference. Please let us know if you require any further assistance. Regards, Arnel