How to use anchor links
-
Upload
fairy-blog-mother -
Category
Documents
-
view
104 -
download
0
description
Transcript of How to use anchor links
![Page 1: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/1.jpg)
How to use anchor links in WordPress
http://fairyblogmother.co.uk
![Page 2: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/2.jpg)
This requires a plugin called ‘Easy Smooth Scroll Links’.
Anchor links allow the reader to jump to another part of the page that is “below the fold”.
![Page 3: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/3.jpg)
Go to the Plugins tab in the left hand sidebar in the Dashboard, and click on ‘Add New’.
![Page 4: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/4.jpg)
In the search field type in: ‘easy smooth scroll links’ and click on the ‘Search Plugins’ button.
![Page 5: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/5.jpg)
Find the correct plugin and install into your blog.
![Page 6: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/6.jpg)
Find your plugin in the listings and make sure it is activated.
![Page 7: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/7.jpg)
Go to a new post editing page and look on the visual editor to see the anchor icon.
![Page 8: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/8.jpg)
Write some content that contains a section that needs to be ‘jumped to’ further down the page.
Place the instructions that will become the link at the top of the page.
![Page 9: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/9.jpg)
Place your cursor at the end of the paragraph before the area or headline you wish to ‘jump to’.
![Page 10: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/10.jpg)
Click on the anchor icon.
![Page 11: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/11.jpg)
Type in a single word name for your anchor icon.
![Page 12: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/12.jpg)
Now click on the ‘Insert’ button.
![Page 13: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/13.jpg)
And now you can see the anchor icon in position.
![Page 14: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/14.jpg)
Highlight the text that will link to the anchor icon.
![Page 15: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/15.jpg)
In the URL field type in the name of the anchor icon preceded by a hash tag, in this case: #test
![Page 16: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/16.jpg)
Then click on the ‘Add Link’ button.
![Page 17: How to use anchor links](https://reader036.fdocuments.net/reader036/viewer/2022062300/555a79bad8b42a98568b4965/html5/thumbnails/17.jpg)
Now your text is linked to the anchor icon and once published will guide the visitor to the selected area.