You can create anchor links within the same landing page to redirect visitors to other sections throughout the page. Anchor links are useful in navigating a longer page, or if you want to provide a button to jump right to a certain section within the form. Anchor links can even be placed to provide a way to jump from the bottom of a page back to the top. This article will detail how to create anchor links.
The following users can add anchor links to landing pages:
- Marketing Managers
Accessing Landing Pages
To access a landing page, do the following:
Step One: In the toolbar of the SharpSpring application, hover over Pages.
Step Two: In the drop-down menu that appears, select Landing Pages.
Step Three: Create a new landing page, or edit an existing landing page.
Note: For more information on creating or editing existing landing pages, refer to Setting Up Landing Pages.
Creating Anchor Links
To create an anchor link, do the following:
Step One: In the menu on the left side of the page, click the + Add Content button.
Step Two: Select the Elements tab.
Step Three: Click the Button button.
Step Four: In the landing page designer, hover over where you would like to insert a button.
Step Five: Click to add a button.
Step Six: In the menu on the left side of the page, click the Edit Content button.
Step Seven: In the landing page designer, click on the button you just added.
Step Eight: In the Redirect To section in the menu that appears, click on the URL tab.
Step Nine: In the URL text box, after the hashtag, type in an ID. For the purposes of this example, we will be using #pagejump as an example.
Note: You can use any word after the hashtag as long as you use the same reference for the ID.
Step Ten: In the menu on the left side of the page, click the </> Edit Code button.
Step Eleven: In the coding window that appears, find the section or container that you would like the button to redirect to.
Step Twelve: Assign the section or container with the corresponding hashtag and ID.
- For sections, the code will appear as follows:
<section id="#pagejump" class="... >
- For containers, the code will appear as follows:
<div id="#pagejump" class="container">
Step Thirteen: At the bottom of the coding screen, click either the Save or Save and Close button to save the coding changes.
Step Fourteen: On the top-right side of the landing page, click Publish to publish changes.