-----
Anchor Links
The three lines above that you can click on are examples of Anchor Links, also known as Jump-Links. If the user clicks on an Anchor Link, the screen will "jump" down to the appropriate place on this page, without the user having to scroll down.
Creating an anchor link so that your user can jump down on the page to a specific section may be a bit more advanced than what you're used to, and involves copying and pasting some code, but you don't really need to know how to code if you follow these instructions. There is a particularly helpful article "“How to Add an Anchor Link to Jump to a Specific Part of a Page” that you will need to open in a separate window. Go to https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html#example-of-creating-a-jumping-anchor-link-10 and open this article.
There is a two-step process wherein you will need to create both a ""Take-Off" Point and a "Landing Point. Your "Take-Off Point" is usually near the top of your article or page and is text that the user can click on to "jump" to a specific place farther down in the page (the "Landing Point"). (On this page, I've also added an anchor link at the bottom of the page to "jump" the user back up to the top.)
To do create an Anchor Link's "Take-Off" Point, you will select one line of code from the article I linked to above, paste it into your Weebly work, change some of the parameters. To create the "Landing" Point, you need to repeat that process, but with a different line of code.
Each pair of code objects (Take-Off Point + Landing Point) has its own unique identifier, telling the computer where to go, and how to know when it gets there. It's like taking off in a plane, and then landing in a particular city. Each city has its own unique name, so you know where you're going, and you don't end up in the wrong place. The code is your ticket for the trip, specifying where exactly you're going, and making sure you get to the right place.
-----
Step One: Creating the Take-Off Point
1. Copy the Sample Code Line: Go to the article I told you about (https://www.w3docs.com/snippets/html/how-to-create-an-anchor-link-to-jump-to-a-specific-part-of-a-page.html#example-of-creating-a-jumping-anchor-link-10), and highlight the line I show hilighted below. Copy the line so it's in your clip-board. (This article doesn't create a jump link for "section 1" because that section is already at the top of the page, so it doesn't really need a link. "Section 2" is the first active jump link example.)
Take note of the colors of the text in the article. The colors won't appear when you paste the code into Weebly, but in the article, the orange string is the unique identifier, and the white string is the Text That the User Sees. In a moment, you're going to change the Unique Identifier to your own thing--that is, you'll change "#section-2" in the orange string on the line, keeping the quotation marks and the pound sign (#) to "#step-one" (my identifier in the example shown here, or whatever your own unique identifier is . You'll also substitute your own Text That The User Sees for the white text (where it says Jump to section 2 with spaces between the words in the example line from the article, to your own text for the user to see. Once you start doing it, you'll see how easy this whole process actually is.
Leave your browser window containing the article open. You're going to need to return to it later.
Leave your browser window containing the article open. You're going to need to return to it later.
2. Insert your Take-Off Point: Now, sign in to Weebly and open your Weebly page to "edit," go to the page you want to work in, and make sure you're in "Build" mode, (I assume you know how to do all that.) Make sure you can see where you want to place your jump-link, I recommend placing it between two elements--between text fields, for example, or between a text field and an image. Click on the "Embed Code" button, and drag it to the place on your page where you want your jump link to appear.
You should see this appear at the location where you dragged the "Embed Code" button:
3. Prepare to Add the Code: Click on this new object you just added to your page. You should see this:
You can play with the position if you want, or just leave it at the default setting, which is what I do.
4. Paste the Example Code: Click on "Edit Custom HTML" You should see this:
4. Paste the Example Code: Click on "Edit Custom HTML" You should see this:
Triple-click the line to hi light it, if it's not already hi lighted. Replace the text by pasting in the example code you copied from the article earlier.
5. Make a Unique Identifier: Carefully select the part of the code that says section-2 . Do not touch the pound sign (#) or quotation marks, just the words section-2 .You should now see this:
Now you need to come up with your own unique identifier for the landing point. This should be either one word, or multiple words with hyphens between the words. Numbers are okay, but avoid spaces or punctuation. You can capitalize something, if you want, but you will need to use this exact same identifier when you create your landing point. I gave my landing point above the identifier of step-one (instead of section-2). You will need to remember and use this identifier exactly once more, for your Landing Point.
6. Set the Text That the User Sees: Next, carefully select the text Jump to section2 as in the example below. This is the text that your user will ultimately see, that he or she will click on to make the jump.
6. Set the Text That the User Sees: Next, carefully select the text Jump to section2 as in the example below. This is the text that your user will ultimately see, that he or she will click on to make the jump.
Now replace the text Jump to section2 as shown above with whatever text you want the user to ultimately see. In this example, I used the text Jump to Step One: Creating the Take-Off Point as the text for the user to see. Here, you can use spaces, punctuation like colons or quotation marks--pretty much whatever you want--except for greater than, less than, or back-slashes (<>/) as they are code-specific . Whatever you type here isn't as critical as your identifier that you used in number 5 above, If you make a typo here, the jump link will still work (as long as you have the correct code before and after the Text That the User Sees), but your user will see your typo. For my first "Take-Off" Point on this page, the HTML code looks like this (the hi lighting is only there to show you the text I replaced in this example):
7. You're Done This Part! Click outside the code editing box you've been working in, The box will close, and you'll see the Text That the User Sees. You've now created your Take-Off Point! But you're not done. You don't yet have any place for your user to jump to. That's what you'll do in "Step Two."
-----
Step Two: Setting the Landing Point
Now it's time to identify where on the web page you want your user to land when he/she clicks on the jump-to link you just created above. The first step was like finding your destination on a map and specifying the name of the city on your ticket. This step is like making sure you have a runway to land on. The process is very similar to what you just did in Step One, except now you're going to copy a different line of code from the article example, Copy, paste into the HTML Code for a new "Embed Code" object, substitute your own unique identifier and the Text you want the user to see. Just like you did in Step One, except the code is slightly different.
1. Copy the Example Code: Go back to article (I told you not to close that window yet!) You're going to select (triple-click) the line shown below, and copy it into your clipboard.
Take note of the colors of the text in the article. The colors won't appear when you paste the code into Weebly, but in the article, the orange string is the unique identifier, and the white string is the Text That the User Sees. In a moment, you're going to change the Unique Identifier to the same one you used in "Step One" for the corresponding Take-Off point--that is, you'll change "section-2" in the orange string, keeping the quotation marks but without the pound sign (#) you used in Step One, to "step-1" or whatever your own unique identifier is . You'll also substitute your own Text That The User Sees for the white text (where it says Section 2 with a space in the example line selected below). The process is going to be very much the same as what you did above to Create the Jump Point, but the code is slightly different.
1. Copy the Example Code: Go back to article (I told you not to close that window yet!) You're going to select (triple-click) the line shown below, and copy it into your clipboard.
Take note of the colors of the text in the article. The colors won't appear when you paste the code into Weebly, but in the article, the orange string is the unique identifier, and the white string is the Text That the User Sees. In a moment, you're going to change the Unique Identifier to the same one you used in "Step One" for the corresponding Take-Off point--that is, you'll change "section-2" in the orange string, keeping the quotation marks but without the pound sign (#) you used in Step One, to "step-1" or whatever your own unique identifier is . You'll also substitute your own Text That The User Sees for the white text (where it says Section 2 with a space in the example line selected below). The process is going to be very much the same as what you did above to Create the Jump Point, but the code is slightly different.
2. Insert your Landing Point: Click on the "Embed Code" button, and drag it to the place on your page where you want your Landing Point to occur. Just like you did before.
Just like before, when you let up on the mouse, you will see this:
3. Prepare to Add the Code: Click on this new object you just added to your page, just like you did before. You should see this:
As before, you can play with the position, if you want.
4. Paste the Example Code: Click on "Edit Custom HTML" button. You should see this:
Triple-click the line to hi light it, if it's not already hi lighted. Replace the text by pasting in the new line of example code you just copied from the article.
5. Re-Use the Unique Identifier from your Take-Off Point: Carefully select the part of the code that says section-2 . Do not touch the pound sign (#) or quotation marks, just the words section-2 .You should now see this:
Change the unique identifier in the example to exactly the same as the corresponding identifier from your Take-Off Point. My first unique identifier was step-one so I changed section-2 in the code to step-one to in my first Landing Point above.
6. Set the Text That the User Sees: Well, here's the thing: The jump will sometimes take the user to the line on the screen below whatever Text That The User Sees. (My phone does that, although my computer shows the text.) If the user scrolls up, he/she will see the text, but it requires the user to take that action. I want my user to see my header for the section without having to scroll up. So I, personally, just create a spacer text that shows up on the screen (if the user scrolls up), something visible to me so I can easily find it and fix it if there's a problem, but I don't actually care if the user sees it. Then I have my own header below the landing Point that I can be certain my user will see when he/she makes the jump. The five hyphens (-----) in the example below is what my user will ultimately see, only if he or she scrolls up after making the jump. Since this is not the unique identifier specifying the name of the Landing Point (as step-one is, in the example below), I can use the hyphen-line for all of my Landing Point destinations. From the user's end, if he or she were scrolling down instead of jumping down, it just looks like a separator. But to me, I know it's a Landing-Point destination. So if there's a problem, I know where to click to fix the issue. You're welcome to use my hyphen-line trick if you want, or use whatever text you like. Since it's a destination point or Landing Point, and its only job is to identify where to land, nothing happens when the user clicks on it. Below are my two Landing Point scripts, so you can see that the only thing different between them is the unique identifier. In the first one, I've hilighted where the code says to show my hyphen-line. In the second Landing Point code, I've hi lighted the unique identifier. These are actual Landing Point scripts I've used for this article.
The script for my "Step One" jump's Landing Point. Here, I've hi lighted the unique identifier that MUST be exactly the same as the one in my Take Off jump script.
The script for my "Step Two" jump's Landing Point. Here, I've hi lighted the hyphen-line I use instead of text, since the jump takes the user to the point immediately BELOW the Landing Point. This is the Text That the User Sees and does not need to be unique. I use this hyphen line for all my Landing Points, which is my preference.
That should be it! You should be good to go! Publish your page, and you should have Jump Links to help your user navigate around your web page. Feel free to play around with the jump links on this page, if you like.
-----
Step Three: Check Your Work
(Obviously, the hyphen-line above my header is a Jump Link Landing Point.)
I added this section, because I realized I had left out a very important part of the process--checking your work. After you publish your page, open it in your browser (not in Weebly edit) and try out your new jump links. If everything works as expected, you're golden. If something isn't working, go back into Weebly edit and check your HTML codes. The first thing to check is to check your Unique Identifiers, which is the most common problem. Make sure:
If your Unique Identifiers are good, make sure you didn't inadvertently erase something from the script that you should have kept.
All of your Take-Off HTML Codes should look something like this:
<a href="#unique-identifier">Text That the User Sees</a><br />
And all of your Landing Point HTML Codes should look something like this:
<h2 id="unique-identifier">New Text That the User Sees or hyphen-line</h2>
If everything looks good and your Jump Links still don't work, try going back to the example article and copying the appropriate line of code and pasting it into your Jump Link Take-Off script (where my problems usually occur) or Landing Point script, and changing the unique-identifiers to something else.
And if none of that works, I don't know what to tell you. It's beyond my poor capabilities to solve.
Good luck and happy coding!
-Denise
I added this section, because I realized I had left out a very important part of the process--checking your work. After you publish your page, open it in your browser (not in Weebly edit) and try out your new jump links. If everything works as expected, you're golden. If something isn't working, go back into Weebly edit and check your HTML codes. The first thing to check is to check your Unique Identifiers, which is the most common problem. Make sure:
- The Unique Identifier is the same for both the Take-Off and the Landing HTML code. (I made that mistake while working on this article, sometimes using a number in my identifier, sometimes spelling it out. It has to be the same both times!)
- The Unique Identifier is one-word or has a hyphen between words (no spaces).
- The Unique Identifier does not contain any punctuation marks aside from the required quotations (") and (in the case of the Take-Off Points) pound signs (#).
- You have all the required code before and after your Unique Identifier and Text That the User Sees.
- You copied the entire line from the example article, including the spaces before the actual code. For some reason known only to the Computer Gods, they're picky about that.
If your Unique Identifiers are good, make sure you didn't inadvertently erase something from the script that you should have kept.
All of your Take-Off HTML Codes should look something like this:
<a href="#unique-identifier">Text That the User Sees</a><br />
And all of your Landing Point HTML Codes should look something like this:
<h2 id="unique-identifier">New Text That the User Sees or hyphen-line</h2>
If everything looks good and your Jump Links still don't work, try going back to the example article and copying the appropriate line of code and pasting it into your Jump Link Take-Off script (where my problems usually occur) or Landing Point script, and changing the unique-identifiers to something else.
And if none of that works, I don't know what to tell you. It's beyond my poor capabilities to solve.
Good luck and happy coding!
-Denise