Create A Page Jump
Hurray! After a half hour of pulling my hair out I finally managed to add anchors (or jump link) to my website!!!! I am so proud and exhausted ! =)
When I decided to add anchors to one of my pages earlier today I thought : “meeeeh it’s going to be so easy, I saw this “anchor” button earlier on wordpress, no problem!”. I was sure it was going to be quick and easy. Painless. Well, reality hit me hard ; I must be too dumb to use this “anchor” button properly lol….
Now why make things simple when you can make them complicated? Just kidding, it’s not that complicated actually… So instead of using the “anchor” stupid thing, I went into the heart of my website : the text box!!!!! We love html, don’t we? =)
What Are Jumps For?
I had a list of items at the top of a post and I wanted to use jump links so that my visitors could jump straight to a place rather than scroll down and look. To do so you want to create a special link called an “anchor” link.
When the link is clicked, it will bring your visitors to the place in the page where the anchor exists. Before you can create the anchor, you’ll need to switch to the Text Editor. To do this, select the tab labeled as either “Text” or “HTML” directly above the right side of the editing area.
Process – part 1
1 – Well obviously, you have to first switch to the scaaaaary text editor. =) Then look for the word/group of words where you want to insert an anchor. This is going to be where people click and will be redirected to another place on your page! It will highlight, like a link.
2 – Once you have found the word/group of words, let’s say in my case it was BOOKS, you want to add this html code right before the word BOOKS (or in your case, the word you have picked)
<a href="#unique-identifier">Click me</a>
3 – What you will do then is replace “unique-identifier” with a number : 1, 2, 3, etc. And replace “Click me” with “BOOKS” or any other word that you want your visitors to click on. If you leave the “Click me” part, it will appear on your page, right before the anchor word and it won’t look exactly professional lol
This is what my html looked like after the above changes : <a href=”#1“>BOOKS</a>
You might end up with two identical words or group of words, in which case all you need to do is to delete the second one from your visual box. By two identical words/group of words I mean something like that : BOOKSBOOKS. lol. The first BOOK is the one you added inside the HTML, the second one is your initial word, from your “visual box”. You can also erase it from the text box but I don’t know about you, this place gives me a headache. It’s easier to see the text on the visual box and to delete it from there!
Process – part 2
4 – Finally, you want to copy/paste the below html text, which will create the anchor point where the above link goes. It’s like creating a bridge. You copy the below text at the exact location where you want your readers to “jump”!
Again I replaced “unique-identifier” with a 1 and “See?” with BOOKS, so that both links matched!
It looked like this <a id=”1“>BOOKS</a>
I also noticed that you should make sure that you have no spaces in your IDs, otherwise the anchors won’t work -_-
Fun, huh? not really, but at least I have my anchors!!!! I hope I made sense with this article! lol
If you have any questions (which you might now that I come to think of it ; I’m not sure I was very good at explaining all this lol) or experience with inserting anchors on your website, please feel free to leave a comment below and I will be more than happy to connect! If you would like to join a community of entrepreneurs and learn tons of stuff about marketing and website creation, I invite you to join Wealthy Affiliate. Click here to join for free ! You can find me there, my username is BelieveItYes 🙂