Hellow guys, Welcome to my website, and you are watching How to create Anchor Links in WordPress (no plugins required). and this vIdeo is uploaded by Build That Website at 2020-12-22T13:58:06-08:00. We are pramote this video only for entertainment and educational perpose only. So, I hop you like our website.
| Name | How to create Anchor Links in WordPress (no plugins required) |
| Video Uploader | Video From Build That Website |
| Upload Date | This Video Uploaded At 22-12-2020 21:58:06 |
| Video Discription | Learn how to easily add anchor links to WordPress, including smooth-scroll effect. Works in Gutenberg or the Classic Editor. Plus, how to fix your header overlapping the anchor. We'll cover: - How to add anchor links - How to make an element an anchor target - How to create a scroll-offset for a better UX - How to add smooth-scrolling using pure CSS (no javascript or plugin required) - How to link to your anchors from another page Creating anchor links in WordPress is pretty easy, especially in the new Gutenberg block editor. If you haven't made the switch to Gutenberg yet, you should. It's much better. 🠺🠺 Learn Gutenberg: https://youtu.be/aX3-bjO8ER8 🠸🠸 --------------------------------------------------------------------------- Video Chapters --------------------------------------------------------------------------- 0:00 - Intro 0:15 - Create an anchor link 0:58 - Creating an anchor target ID 2:18 - Fix anchor link offset (top of screen) 3:33 - Scroll-margin-top CSS rule 5:26 - Add Smooth scroll to anchor links 6:06 - Anchor links in WordPress classic editor 7:03 - Link to anchor from another page or website 7:26 - Outro 🠺🠺 How to add anchor links: 🠸🠸 1. Create a link with a hashtag, like: #anchorlink 2. Add an id to an element using the name: 'anchorlink' For the classic editor: you can edit the 'id' of an element by using the text editor, rather than the WYSIWYG visual editor. If you don't like the anchors jumping to the very top of the screen (or being overlapped by your fixed header) you can create a scroll margin using CSS. This will create margin between the top of the screen and your anchor target. Example CSS: (this rule sets a scroll-margin for any element with an ID) *[id] { scroll-margin-top: 50px; } You can also add a smooth-scroll animation, using pure CSS. You don't need javascript or another plugin. It's well-supported in the recent versions of major browsers but may not work in older browsers (but won't break anything). Important: Make sure to use the media-query to allow users to opt out of smooth-scroll. Some users can get motion sickness from web elements that move. |
| Category | Howto & Style |
| Tags | anchor links wordpress | anchor links gutenberg | anchor links | anchor links scrolling too far | anchor link offset | smooth scroll | scroll margin | How to add anchor links in wordpress | Wordpress Tutorial | anchor links in wordpress | anchor link smooth scroll | how to create anchor links in wordpress | jump links wordpress |
