How To Create Anchor Links In Weebly
Wednesday July 1, 2015 | Comments
This tutorial will show you how to create anchor links in a Weebly site. Anchor links are essentially internal links. An external link will take you to another page or website, but an internal link, or anchor link, will quickly take you to another location on the same page.
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>
<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:
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>
Details of Project
Level of difficulty: Intermediate
Time to complete: 5 Minutes
How To Install Any Font Into Your Weebly Site
Updated on June 20, 2016
How To Create A Sidebar That Will Appear On Every Standard Weebly Page
Updated on June 11, 2016
How To Create An "<h1>" Tag In Your Weebly Site
Updated on July 9, 2016
Weebly Tricks on Facebook
Weebly Tricks on Google+