{"id":33634,"date":"2022-10-10T17:45:54","date_gmt":"2022-10-10T12:15:54","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=33634"},"modified":"2023-04-12T16:39:34","modified_gmt":"2023-04-12T11:09:34","slug":"how-to-use-anchor-tags-on-landing-pages-and-websites","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/how-to-use-anchor-tags-on-landing-pages-and-websites\/","title":{"rendered":"How Anchor Tags Can Make Your Landing Pages More Impactful"},"content":{"rendered":"\n

How do you feel when Google Maps shows you a shorter route to reach your destination faster (that actually worked)? Isn’t it a great feeling? It\u2019s the same with anchor tags or links on landing pages. Anchor links or tags are links on your website or landing page that redirect the visitors to a section on the same page. They let the users jump to different sections on the page while staying on the same page. You can add anchor links as hyperlinks or arrow buttons. They are most suitable for lengthy web pages so that visitors don\u2019t have to scroll too much. <\/p>\n\n\n\n

Before we discuss the ways to use anchor links, let\u2019s see all the advantages of using them on your landing pages.<\/p>\n\n\n\n

Uses of Anchor Tags on Landing Pages<\/h2>\n\n\n\n

1. They facilitate the conversion process<\/h3>\n\n\n\n

As the user can easily navigate through the landing page, it eliminates all the extra effort. So, they are keener to take action.     <\/p>\n\n\n\n

2. They work like visual cues<\/h3>\n\n\n\n

Providing visual cues is a best practice if you\u2019re aiming for high-converting landing pages. Having anchor tags serves this purpose and directs people to the key elements that contribute to conversions. <\/p>\n\n\n\n

3. Anchor tags make scrolling easier despite the length of the landing page<\/h3>\n\n\n\n

As anchor tags enable the users to jump to the section of their choice without being redirected to another web page, scrolling becomes much faster. Consequently, it makes the content easy to consume and act upon.<\/p>\n\n\n\n

4. They ensure a pleasant customer experience<\/h3>\n\n\n\n

The overall customer experience drastically improves when you add anchor tags to your landing pages. This is particularly true for people using tablets and mobile phones. It spares them of the horror of clicking through every link and waiting for the page to load, which uses up too much of Internet bandwidth too in addition to time. <\/p>\n\n\n\n

How to Make Anchor Tags Visually Appealing?<\/h2>\n\n\n\n

You can either have static anchor tags or animated ones. Of course, an animated anchor link goes a long way in fetching more eyeballs. 
Check the image below. By using the power of animation and white space, you can take the customer experience to the next level and increase conversions. <\/p>\n\n\n\n

\"arrow\"<\/figure>\n\n\n\n

Where Can You Use Anchor Tags on Landing Pages?<\/h2>\n\n\n\n

There are several ways in which you can use anchor tags on landing pages. It all boils down to the purpose of the landing page \u2014 what you wish to achieve out of it. <\/p>\n\n\n\n

Here\u2019s how you can put anchor tags to their best use. <\/p>\n\n\n\n

1. Valuable Information<\/h3>\n\n\n\n

With the help of anchor tags, you can draw attention to the most important information on the landing page. You can use an animated downward arrow, as shown above to encourage the user to scroll through. For instance: Once you have introduced your product, you can add a downward arrow to guide the readers towards its salient features and benefits. The page will quickly scroll for them and present the information that would prompt them to take action. <\/p>\n\n\n\n

Here\u2019s how WebiMax has driven the users to scroll through their page by adding an arrow. It zooms in as the readers hover over it. That increases the likelihood of users clicking on it and reading further. <\/p>\n\n\n\n

\"webimax
Source<\/a><\/figcaption><\/figure>\n\n\n\n

2. Table of Contents<\/h3>\n\n\n\n

Imagine you have multiple, long sections on your landing page. Anchor links can come in handy here. They can serve as directional cues for the content that is included on the page. For example: If you have a landing page featuring a travel guide: \u201cA backpacking trip to Bali, Indonesia\u201d, you can divide the itinerary into different sections. Highlight them as a table of contents to make the content more engaging for the readers. Include an actionable CTA at the end so that users get keener to book the tickets by the time they finish reading your guide. <\/p>\n\n\n\n

Email Uplers uses this tactic in their long-form articles for better readability. <\/p>\n\n\n\n

\"Table<\/figure>\n\n\n\n

You can use the same tactic in your landing pages like Evelyn has done for their news, music, and other section<\/p>\n\n\n\n

\"evelyn
Source<\/a><\/figcaption><\/figure>\n\n\n\n

3. Customer Reviews and Testimonials<\/h3>\n\n\n\n

Social proof is an inevitable part of every landing page. You can use anchor tags to bring the users to this section and build their trust in your products. Eventually, it will encourage them to convert. Anchor tags can also be used to direct the readers to the case studies section to reinforce confidence in their minds. Moreover, there are various landing page design services<\/a> that can help you strategically include relevant customer reviews and testimonials in your landing pages.<\/p>\n\n\n\n

4. Lead Capture Forms<\/h3>\n\n\n\n

Suppose you are running a PPC ad to build your email list<\/a> and get more subscriptions for your newsletters. The landing page for this ad can include anchor tags at the \u201cSign up\u201d button. It will work wonders in getting you more subscribers for your emails. <\/p>\n\n\n\n

5. CTA Button<\/h3>\n\n\n\n

More often than not, people avoid clicking on the CTA button<\/a> just because they don\u2019t want to be redirected to another page. It is too time-consuming. So, anchor tags work as CTA buttons that instantly take the users to the form and help in quick conversion. <\/p>\n\n\n\n

6. Anchor Links in Navigation Bar<\/h3>\n\n\n\n

Wouldn\u2019t it be great if you can easily navigate to the different sections like \u201cAbout us\u201d, \u201cBenefits\u201d, and \u201cPricing\u201d without waiting for the new page to load? Calendly sets the perfect example of using this tactic to showcase the products that they have for individuals, teams, and their pricing structure. <\/p>\n\n\n\n

On clicking the options in the navigation bar, the user will be presented with the respective details. Take a look at the page in action.<\/p>\n\n\n\n

\"Calendly
Source<\/a><\/figcaption><\/figure>\n\n\n\n

7. Scroll to Top Button<\/h3>\n\n\n\n

How many times have you scrolled till the end of a long landing page and wished that there was some magical button to take you to the top? On modern desktops and laptops, you have the \u201cHome\u201d button to take you to the top. But what about mobile devices? Mobile users would find it thumb-wrenching to scroll till the end and then again scroll to where they started. That\u2019s where the \u201cscroll to top\u201d button comes into the picture. It imparts a smooth navigation experience to the readers accessing your landing page on devices with small screens. <\/p>\n\n\n\n

Here\u2019s how Crunchify employs the \u201cback to top\u201d button with an upward arrow:<\/p>\n\n\n\n

\"Crunchify
Source<\/a><\/figcaption><\/figure>\n\n\n
\"We<\/a><\/div><\/div>\n\n\n\n

Technical Aspects of Adding an Anchor Link<\/h2>\n\n\n\n

An anchor link has two parts. One is the anchor and another is the actual link. The anchor is the unique identifier that you assign to your page elements. It is presented as id=\u201cunique-id\u201d. The link includes the hash symbol along with the unique id. The final outcome looks like #unique-id. <\/p>\n\n\n\n

For example: If you want to link to the \u201cFeatures\u201d section of a landing page, your unique id can be: #features or #product-features. 
Look for the element and then add the unique id to the opening tag. 
Subsequently, create a link from the top of the page. When you create the link, mention the anchor along with the hash symbol. <\/p>\n\n\n\n

Confused?<\/p>\n\n\n\n

Let\u2019s understand it with respect to WordPress (as it is the most popular CMS).<\/p>\n\n\n\n

Go to the WordPress editor. Locate the section where you want to assign the anchor. For example: Features of XYZ product. 
Add an ID with a unique anchor name.
It will look like this:<\/p>\n\n\n\n

<h2 id=\u201dproduct-features\u201d>Product Features<\/h2><\/p>\n\n\n\n

This means that \u201cProduct features\u201d is assigned the unique id \u201cproduct-features\u201d and it is in the <h2> tag. <\/p>\n\n\n\n

The next step is to link to this anchor. <\/p>\n\n\n\n