Log into the Sparkhub app

Landing Page Tip: How To Add Navigation Buttons

Aug 10, 2023

When creating a landing page - such as a Project Broadcast Landing Page - it's simple to add buttons at the top to help your viewers shortcut to locations further down the page. This is a great solution if your page has a lot of content. Do your viewers a favor and make it easy for them to find the information they're looking for!

In this quick tutorial, I show you all the steps, and the written instructions and code are below. Take a look!

Step 1 - Plan 

Identify what locations you want to mark on your page for navigation.

Step 2 - Add anchors to define the destinations

At the top of each destination, add a code block and insert the following code. (This code is for an anchor called "key-info." You can't use spaces. Put the anchor name inside the quotation marks.)

In your code block:

<! –– This code establishes this location for the purpose of navigation buttons at the top. ––> 

<p id="key-info"> </p>

Step 3 - Point to the anchor

For each anchor you created, create a button (or hyperlinked text, clickable image, etc.) that points to it. To do this, set its destination to be the anchor name you established in the code block(s) above, with a hashtag prefix. For example:  #key-info  

Set it to open in the same tab.

Step 3 - Test your work (always!)

Save your landing page and open it in a browser window to test your buttons! 

Give this a try! And, to see how Sparkhub can power up your Party Pages with automated and personalized content, for every event - with no editing required - click here.

Join Project Broadcast, and get a discount for using my affiliate link: click here