Anchor Tags

Add anchor tags to buttons and URLs to target specific sections of a page. 

Key terms:

Anchor tag: An ID added to a section of content within the page settings, that is then used to anchor page visitors to that section of content.

Anchor Tags 

Anchor tags allow you to land visitors on a page at the exact section you’d like them to see - or use them to jump to a specific section within a page - without scrolling down.

Anchor tags allow you to add a tag, which attaches to a specific section, word or phrase on a page.

In doing this it will navigate readers to that very section of the page in one click, without the need to scroll.

Try clicking this one here that will anchor you to the bottom of this page 

ID - Giving the section a name/identity

To begin setting up, the first thing you need to do is add an anchor tag ID to the section of content you want to anchor to. You can then add this anchor tag to the page URL which tells your browser to take you to that page, but more specifically, that section of the page.

Below we outline how to do each step using both Visual Builder and Classic Builder. 

How to add an anchor tag

Visual Builder

To add an anchor tag using Visual Builder, navigate to the section of content where you would like to add the anchor:

Edit the section using the pen icon in the right-hand corner > Advanced> Add an anchor tag to the ID field, e.g. faqs > Save.

Classic Builder

Simply go to the content row you wish to add an anchor tag to and edit the content row.

Here you can add an anchor tag name to the ID section e.g. faqs.

Now you've added an ID to a column or section, you can use this ID within a URL to direct users to that specific section of the page.

Tags can be applied in two way:

URLs

You can add you anchor tag to the page URL, so that when clicked on, the user is taken to a certain section of content. This URL could then be sent out to supporters, embedded in an email for example.

The anchor tag ID needs to be added to the end of the URL using #{anchor tag}, so in the above example it would be https://www.websitename.co/event-name/pagename#faqs

Having #faqs at the end of the URL is anchoring page visitors to that section of the page.

This would navigate to that page, and drop the user to that specific content block. 

Buttons

You may want to add an anchor to a button either on the same page, like the above example on this page, or to another page on your site.

Visual Builder

Click to edit your button > Content > Scroll down to Button Link and select URL

If you’re anchoring to a section on the same page, you can just add in the anchor ID, e.g. #top ;

If you’re anchoring to a different page on your site, then you need to add the page URL details, e.g. /pagename#top

In this case the tag is #top as the tag 'top' has been added to a content block further up the page.

Classic Builder

To add an anchor tag to a button in Classic Builder, edit the button in the content block on the page > Add the anchor tag to the URL field > save:

As with the example on Visual Builder -

If you’re anchoring to a section on the same page, you can just add in the anchor ID, e.g. #top

If you’re anchoring to a different page on your site, then you need to add the page URL details, e.g. /pagename#top

Other content blocks

Anchor tags can be used when users click on just about anything such as hyperlinked text or images. 

Go to bottom.

This hyperlinked text is just linking to #Bottom

If hyperlinking from another page on the site, we would have used /blog/anchor-tags#Bottom

If hyperlinking from another website, we would have used https://support.funraisin.co/blog/anchor-tags#Bottom

The first image below is an example of how text can be highlighted and hyperlinked.

The second image is an example of an image being edited, and within Advanced a URL is added. Once published, if anyone clicks on that image they will be taken to the bottom of this support article.

Use the button below to anchor back to the top of the page. As this button is anchoring to a section on this page, it's simply linking to #Top.

And that’s how you can set up anchor tags to quickly move users around your pages.