{"id":801,"date":"2020-12-02T10:37:48","date_gmt":"2020-12-02T10:37:48","guid":{"rendered":"https:\/\/wearesmile.com\/help\/?post_type=ht_kb&#038;p=801"},"modified":"2020-12-02T13:53:31","modified_gmt":"2020-12-02T13:53:31","slug":"add-anchor-links-to-headers-in-gutenberg","status":"publish","type":"ht_kb","link":"https:\/\/wearesmile.com\/help\/documentation\/add-anchor-links-to-headers-in-gutenberg\/","title":{"rendered":"Add Anchor Links to Headers in Gutenberg"},"content":{"rendered":"\n<p>Anchor links have always been a handy way of helping users quickly jump straight to the content they want to access. In the Gutenberg editor, WordPress has made this even easier with support for adding anchors to Header blocks which can easily be found in the block settings.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"653\" src=\"https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-1024x653.jpg\" alt=\"\" class=\"wp-image-810\" srcset=\"https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-1024x653.jpg 1024w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-300x191.jpg 300w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-768x489.jpg 768w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-50x32.jpg 50w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-1536x979.jpg 1536w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-60x38.jpg 60w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1-100x64.jpg 100w, https:\/\/wearesmile.com\/help\/wp-content\/uploads\/sites\/3\/2020\/12\/Annotation-on-2020-12-02-at-09-33-10-1.jpg 1552w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>Where to find the HTML anchor field in the block settings<\/figcaption><\/figure>\n\n\n\n<ol class=\"wp-block-list\"><li>Select a header.<\/li><li>Click the &#8216;Advanced&#8217; tab in the block settings (use the settings wheel top-right to toggle this open if it isn&#8217;t already).<\/li><li>Type in the name of your link (in my example, I&#8217;ve named it &#8216;supporting&#8217;) and update the page.<\/li><li>You can now use the suffix &#8216;#supporting&#8217; at the end of the page&#8217;s URL to take users directly to this heading. So if the page has the slug <strong>\/helping-us-out<\/strong>  use <strong>\/helping-us-out#supporting<\/strong> to target your anchor.<\/li><\/ol>\n\n\n\n<p>How you make use of your anchor is entirely up to you! Common scenarios include creating a table of contents at the top of a long page in order to link to specific sections within it. More creative ways include using call-to-action buttons to shoot your users off to a subsection of an entirely different page.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Anchor links have always been a handy way of helping users quickly jump straight to the content they want to access. In the Gutenberg editor, WordPress has made this even easier with support for adding anchors to Header blocks which can easily be found in the block settings. Select a&#8230;<\/p>\n","protected":false},"author":5,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"_searchwp_excluded":"","footnotes":""},"ht-kb-category":[103],"ht-kb-tag":[],"class_list":["post-801","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-gutenberg"],"_links":{"self":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb\/801","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/comments?post=801"}],"version-history":[{"count":3,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb\/801\/revisions"}],"predecessor-version":[{"id":812,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb\/801\/revisions\/812"}],"wp:attachment":[{"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/media?parent=801"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb-category?post=801"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/wearesmile.com\/help\/wp-json\/wp\/v2\/ht-kb-tag?post=801"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}