{"id":80870,"date":"2017-06-08T09:14:35","date_gmt":"2017-06-08T13:14:35","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=80870"},"modified":"2017-10-20T08:57:01","modified_gmt":"2017-10-20T12:57:01","slug":"multipurpose-website-templates-use-anchor-links","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/multipurpose-website-templates-use-anchor-links.html","title":{"rendered":"Multipurpose Website Templates. How to use anchor links"},"content":{"rendered":"<p>The following tutorial is going to show you how to use anchor links in <a href=\"https:\/\/www.templatemonster.com\/web-templates.php\" target=\"_blank\" title=\"Website Templates\">Multipurpose Website templates<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/80HSPGrG8LI\"><\/iframe>\r\n<\/div>\r\n<p><strong>An anchor link<\/strong> (also referred to as &#8216;page jump&#8217; link) is a link on a page that brings you to a specific place on that page or to a specific place on a different page. Anchor links can be helpful when you want to bring a website visitor to a <strong>specific spot<\/strong> on a page so that they do not have to scroll through all of your content.<\/p>\r\n<p>Let&#8217;s learn how to use them.<\/p>\r\n<ol>\r\n<li><p>First, determine which <strong>section<\/strong> of your page would you like your website visitor to be brought to. We will take &#8216;Portfolio templates&#8217; section of our website homepage as an example to show you how to create an anchor link. <\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1.jpg\" alt=\"\" width=\"1270\" height=\"723\" class=\"alignnone size-full wp-image-80871\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1.jpg 1270w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1-150x85.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1-300x171.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1-768x437.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_1-1024x583.jpg 1024w\" sizes=\"(max-width: 1270px) 100vw, 1270px\" \/><\/a>\r\n\r\n<\/li>\r\n<li>\r\n  <p>To make it an anchor <strong>target<\/strong>, we need to add HTML<strong> &#8220;id&#8221; <\/strong>tag to our section. The code looks as follows:<\/p>\r\n<pre class=\"brush:html\">&lt;section id=&quot;new&quot; class=&quot;bg-decoration-wrap-sm bg-decoration-bottom bg-decoration-bottom-sm section-50 section-md-top-100 section-md-bottom-120 bg-gray-lighter&quot;&gt;\r\n\t&lt;div class=&quot;shell bg-decoration-content text-center&quot;&gt;\r\n\t&lt;h3&gt;Portfolio Templates&lt;\/h3&gt;\r\n\t&lt;p class=&quot;text-secondary&quot;&gt;Showcase any of your products or projects with our great selection of Portfolio&lt;\/p&gt;\r\n\t\t&lt;div class=&quot;offset-top-50&quot;&gt;&lt;img src=&quot;images\/landing-2-970x361.png&quot; alt=&quot;&quot; width=&quot;970&quot; height=&quot;361&quot;\/&gt;\r\n\t\t&lt;\/div&gt;\r\n\t&lt;\/div&gt;\r\n\t&lt;div class=&quot;bg-decoration-object bg-primary&quot;&gt;&lt;\/div&gt;\r\n&lt;\/section&gt;<\/pre>\r\n<p>As you can see, we added an &#8216;id&#8217; tag with &#8216;new&#8217; value, so our section now can be targeted with an anchor link.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2.jpg\" alt=\"\" width=\"1146\" height=\"374\" class=\"alignnone size-full wp-image-80872\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2.jpg 1146w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2-150x49.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2-300x98.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2-768x251.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_2-1024x334.jpg 1024w\" sizes=\"(max-width: 1146px) 100vw, 1146px\" \/><\/a>\r\n\r\n<\/li>\r\n<li><p>Now we need to decide how our link itself will look like. Basically, we can target our anchor with every type of link possible: regular text link, image link, button link, menu item link. Let&#8217;s link the button: all other types of links will work in a same fashion.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3.jpg\" alt=\"\" width=\"1267\" height=\"723\" class=\"alignnone size-full wp-image-80873\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3.jpg 1267w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3-150x86.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3-300x171.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3-768x438.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_3-1024x584.jpg 1024w\" sizes=\"(max-width: 1267px) 100vw, 1267px\" \/><\/a>\r\n\r\n<\/li>\r\n<li><p>Our button default code is as follows:<\/p>\r\n  <pre class=\"brush:html\"> &lt;div class=&quot;group-xl-responsive offset-top-30 offset-sm-top-45&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-xl btn-white-outline-variant-1&quot;&gt;Start a journey&lt;\/a&gt;&lt;\/div&gt;<\/pre>\r\n  <p>To make it work, we need to replace<strong> &#8216;#&#8217; in &#8216;href&#8217;<\/strong> property declaration with our id and a hashtag:<\/p>\r\n<pre class=\"brush:html\">&lt;div class=&quot;group-xl-responsive offset-top-30 offset-sm-top-45&quot;&gt;&lt;a href=&quot;#new&quot; class=&quot;btn btn-xl btn-white-outline-variant-1&quot;&gt;Start a journey&lt;\/a&gt;&lt;\/div&gt;<\/pre>\r\n\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4.jpg\" alt=\"\" width=\"1124\" height=\"136\" class=\"alignnone size-full wp-image-80874\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4.jpg 1124w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4-150x18.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4-300x36.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4-768x93.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_4-1024x124.jpg 1024w\" sizes=\"(max-width: 1124px) 100vw, 1124px\" \/><\/a>\r\n\r\n<\/li>\r\n<li><p>Let&#8217;s check this out: upon clicking the button, the page scrolls to the section we need.<\/p><\/li>\r\n<li>\r\n  <p>If your template is using customWaypoints plugin, you can create a smooth scroll to your anchor with the &#8216;data-custom-scroll-to&#8217; attribute. There is no need to specify &#8216;href&#8217; attribute value in this case, also there&#8217;s no need to add a hashtag:\r\n <\/p>\r\n  <pre class=\"brush:html\">&lt;div class=&quot;group-xl-responsive offset-top-30 offset-sm-top-45&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;btn btn-xl btn-white-outline-variant-1 data-custom-scroll-to=&quot;new&quot;&gt;Start a journey&lt;\/a&gt;&lt;\/div&gt;<\/pre>\r\n  <p>It has the same anchor link function, however the scroll effect is smooth.<\/p>\r\n  \r\n  \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5.jpg\" alt=\"\" width=\"1101\" height=\"138\" class=\"alignnone size-full wp-image-80875\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5.jpg 1101w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5-150x19.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5-300x38.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5-768x96.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_5-1024x128.jpg 1024w\" sizes=\"(max-width: 1101px) 100vw, 1101px\" \/><\/a>  \r\n  \r\n<\/li>\r\n<li><p>If you want to take your website visitor to a specific section on a different page, you should specify the link in the following format:<\/p>\r\n  <pre class=\"brush:html\">&lt;div class=&quot;group-xl-responsive offset-top-30 offset-sm-top-45&quot;&gt;&lt;a href=&quot;http:\/\/localhost\/starbis\/blog-classic.html#external&quot;class=&quot;btn btn-xl btn-white-outline-variant-1&quot;&gt;Start a journey&lt;\/a&gt;&lt;\/div&gt;<\/pre>\r\n  <p>Where <strong>http:\/\/localhost\/starbis\/blog-classic.html<\/strong> is your full page URL and #external is an anchor to an element with id=&quot;external&quot; declaration.<\/p>\r\n  \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6.jpg\" alt=\"\" width=\"1166\" height=\"136\" class=\"alignnone size-full wp-image-80876\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6.jpg 1166w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6-150x17.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6-300x35.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6-768x90.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_6-1024x119.jpg 1024w\" sizes=\"(max-width: 1166px) 100vw, 1166px\" \/><\/a> \r\n\r\n \r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7.jpg\" alt=\"\" width=\"1151\" height=\"549\" class=\"alignnone size-full wp-image-80877\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7.jpg 1151w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7-150x72.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7-300x143.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7-768x366.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_7-1024x488.jpg 1024w\" sizes=\"(max-width: 1151px) 100vw, 1151px\" \/><\/a> \r\n\r\n<\/li>\r\n<li><p>That&#8217;s it. Now you know how to use anchor links in Multipurpose Website Templates.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8.jpg\" alt=\"\" width=\"1270\" height=\"718\" class=\"alignnone size-full wp-image-80878\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8.jpg 1270w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8-150x85.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8-300x170.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8-768x434.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/06\/Multipurpose_Website_Templates._How_to_use_anchor_links_8-1024x579.jpg 1024w\" sizes=\"(max-width: 1270px) 100vw, 1270px\" \/><\/a>\r\n \r\n <\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n <a href=\"http:\/\/www.youtube.com\/watch?v=80HSPGrG8LI?width=1280&amp;height=720\" rel=\"prettyPhoto\">Multipurpose Website Templates. How to use anchor links<\/a>","protected":false},"excerpt":{"rendered":"<p>The following tutorial is going to show you how to use anchor links in Multipurpose Website templates.<\/p>\n","protected":false},"author":107,"featured_media":80879,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1016],"tags":[1017,521,2568],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80870"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/107"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=80870"}],"version-history":[{"count":8,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80870\/revisions"}],"predecessor-version":[{"id":83203,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/80870\/revisions\/83203"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/80879"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=80870"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=80870"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=80870"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}