Landing Page Tip: How To Add Navigation Buttons
Aug 10, 2023When 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