Step 1. create starting anchor link point [Anchor Link]

First, we need to create the starting link that will link to the anchor link on the same page. You can use text or an image to do this.

For this example, we want visitors to the site to be able to find promoted bands by the first letter of the band's name. All we did we use the "TEXT" element to create a simple alphabet text.

---

Step 2. create ending anchor link point [Anchor]

To create our ending anchor link point, we need to use the "EMBED" element. Add the following code to the "EMBED" element and create your anchor name and text as shown in orange below:

<div class="anchor"><h2><a name="PUT ANCHOR NAME HERE">PUT TEXT HERE</a></h2></div>

Example:
<div class="anchor"><h2><a name="A">A</a></h2></div>

Since this tutorial will be sorting bands by the first letter of the bands' name, we've decided to make the anchor name "A", and the text to be displayed "A" as well.

---

Step 3. Connect the anchor link to the anchor

Now we need to link the starting anchor link point to the ending anchor link point. To do this, either highlight the text you're using or select the image and choose the "Create Link" option Weebly provides you.

Inside the "Website URL" section, you're going to place the URL of the page you're creating the anchor link on (i.e., the page you're working on), followed by a hashtag and the anchor name you created for this anchor link in Step 2. It will look like this:

YourPage'sURL#AnchorName

Example:
http://rockingtonstudio.weebly.com/bands.html#A

Here is the completion of the anchor link. The anchor link consists of the anchor link and the anchor. They are connected by the anchor name which is shown below in orange.


Anchor Link http://rockingtonstudio.weebly.com/bands.html#A
Anchor <div class="anchor"><h2><a name="A">A</a></h2></div>

---

You're done! 
Publish your site to see your new anchor link

---

Tips & additional information

Once you finish Step 2., the text that displays may not be the exact same font-family as your website. This is normal and will display correctly once your site is published.

---

Because the anchor you create in Step 2 is an active link, it will take on the active link CSS properties of your site (i.e., a and a:hover). If you would rather the anchor text blend in with the other text of your website, add the following codes to your "main-style.css" file. Change the text in orange to the hex color of your site's text.

/* Anchor's active link color */
.anchor a {
    color:#000;
}

/* Anchor's hover color */
.anchor a:hover {
    color:#000;
}

---

If you're using an image for your anchor instead of text (Step 2.), you need to use the following code below. Upload your image to Weebly by going to Design>Edit HTML/CSS>ASSESTS>Upload File(s)..

Replace the orange text below with the file name of the image you just uploaded to Weebly.

  <div class="anchor"><a name="A"><img src ="/files/theme/FileName "></a></div>

---

comments powered by Disqus