Improve audience engagement with page jumps

ginger cat jumping on bed

Whenever you’re online it’s really important to think about your ‘call to action’. By that I mean  what it is you want your audience to do after they’ve read your email, blog post or social media update. Today I’d like to share with you a simple html web tip that will make it easier for readers of your content to respond to your calls to action.

To jump straight to the how-to section of this post, please click on the link below:

Choose where to jump to on your page

Jump to your call to action

For campaigning organisations, it’s commonplace to ask your audiences to sign a petition. Often the petition can be found towards the bottom of the page, beneath paragraphs of text outlining the campaign and why readers should take action.

This structure makes sense and is designed to persuade readers to go on a journey which ends in them taking action. But what about those people who are already your supporters and don’t need to be persuaded? How do you make sure these readers aren’t put off from signing your petition (or signing up for your email alerts?).

That’s where creating links to different parts within the same web page can help. These links, known as Page Jumps, make it easy for readers to quickly get to the part of the page that’s most relevant to them. Here’s how to make your own.

Choose where to jump to on your page

Target text is the name given to the part of the page you want your readers to jump to. Your target text could be a page heading, a phrase within a paragraph or even an invisible element marking the top, middle or bottom of your page.

For the purposes of this example, I’m going to jump to the heading “choose where to jump to on your page”.

To do this, switch from Visual to Text edit mode within your CMS page editor. This allows you to directly edit the html code which makes up your finished blog post or web page.

Create target text

Once you’re in Text edit mode, look for the line of text which contains the heading you wish to jump to. You may find it helpful to use the  CTRL + F  (or Command + F on Mac) keyboard shortcut to search for the text you’re looking for.

Screenshot of WordPress Text edit mode
Editing the OpenUp Digital blog post in WordPress Text edit mode

Next, it’s time to add some html to turn the heading into a jump target.

Here’s what the line looks before I add the code

<h3>Choose where to jump to on your page</h3>

And here’s it looks like afterwards (additional code highlighted in bold)

<h3 id=”jump”>Choose where to jump to on your page</h3>

What’s changed is I have created a unique ID with the name of “jump” to indicate where on the page to jump to.

Should you want to create more than one point remember to give each target a unique ID, otherwise the page jumps will not work correctly.

Create a link to your target

Now that you’ve created a target it’s time to create a link that your readers can easily click on.

In my case I’ve added  a sentence at the start of my post, giving readers the chance to jump straight to the how-to section of my post.

To create the link, I switched back to the Visual edit mode and highlighted the text I wanted to use for the link. In line with good practice, I chose text which clearly tells people what they are clicking on.

Once I had highlighted my text, I clicked on the link icon in the editor tools, in the same way you would create a link to an external web page.

Next, I entered the following text into the link box and then clicked on the enter button:

#jump

WordPress link box open within web page
Creating a link to another section of a page

This instruction tells WordPress (or any other web system you use) to take the reader to the area on the same page rather than a separate web page. Note that jump matches the ID label I gave my target text earlier. If your link text does not match the target ID your jump link will not work.

Check that your page jump works

Before publishing your page it’s important to check that your page jump works correctly. After all, a broken link will frustrate your readers even more than having to scroll through a long web page.

To check that your page jump is working, click on Save Draft to save a working version of your document then click on Preview. Your web page should appear in another tab.

Test out the link you have created and make sure that it works. If you find that it’s not worked, go back and look again at your web page in Text mode. The slightest mistake, such as forgetting to add ” before and after your ID label, can stop your page jump working. Once you’ve made your changes, select Preview again to see if your link is now working.

Publish your web page

Once you’re happy that your page jump is working, give your web page a final proof read then hit Publish. Visit your live page to be absolutely sure that your jump still works. Once you’re happy with it, you’re free to share your page with your audience in the same way you would normally do.

Photo:”cat bed jump” by Luan Anh is licensed under CC BY-SA 2.0

Leave a Reply

Your email address will not be published. Required fields are marked *