{"id":59726,"date":"2016-01-27T05:01:09","date_gmt":"2016-01-27T10:01:09","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=59726"},"modified":"2016-03-07T05:25:32","modified_gmt":"2016-03-07T10:25:32","slug":"cherryframework-4-how-to-use-anchor-links","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-use-anchor-links.html","title":{"rendered":"CherryFramework 4. How to use anchor links"},"content":{"rendered":"

This tutorial is going to show how to use anchor links in CherryFramework4 templates.<\/p>\r\nCherryFramework 4. How to use anchor links<\/a>\r\n

Before you can create the anchor, you\u2019ll need to switch to the Text Editor.<\/strong> To do this, select the tab labeled as either \u201cText\u201d or \u201cHTML\u201d directly above the right side of the editing area.<\/p>\r\n\r\n

In order to create anchor links, you should perform the following steps:<\/p>\r\n\r\n\r\n

    \r\n\r\n
  1. \r\n

    Log into your Dashboard<\/strong>, navigate to Pages- All Pages<\/strong> and open the page that has to be changed using anchor links.<\/p> \r\n <\/li>\r\n \r\n

  2. \r\n

    Search for the title of the block that you want to specify as link. Check if there is available id attribute<\/strong>. If there is no id, create it. The anchor is written like this:<\/p>\r\n 

    <a id=\"our-themes\">I am the anchor.<\/a><\/pre>\r\n\r\n\r\n
    The text above which says id=”unique-identifier” acts as a label for your anchor.<\/p>\r\n\r\n\r\n  
    Note: Make sure you have no spaces in your IDs, since that can cause problems in older browsers. Also, be sure to use a unique ID for each anchor that you create.<\/p><\/li>\r\n \r\n 
  3. \r\n   
    After you have found or added an id attribute to the header element of your block, copy the id attribute<\/strong> or write it down:<\/p>\r\n\r\n\"CherryFramework-4.-How-to-use-anchor-links-1\"<\/a>\r\n <\/li>\r\n\t\r\n 
  4. \r\n   
    Navigate to Appearance -> Menus<\/strong> select from the drop down Header Menu<\/strong>,  click on Select<\/strong> item:<\/p> \r\n\r\n\"CherryFramework-4.-How-to-use-anchor-links-2\"<\/a>\r\n <\/li>\r\n \r\n 
  5. \r\n 
    On the left you will see three options to insert a menu item: Pages, Custom Links and Categories. From this list select the Custom Links<\/strong> option.<\/p> \r\n <\/li>\r\n\r\n\t\r\n 
  6. \r\n   
    In order to add link to your anchor, select some text, and then use the Insert\/Edit link<\/strong> button. In the URL field there, enter the # symbol, followed by the name of the anchor ID<\/strong>.<\/p>\r\n 
    Note: If the block is situated on the same page, you don\u2019t need to specify page URL, just #id:<\/p> \r\n\"CherryFramework-4.-How-to-use-anchor-links-3\"<\/a>\r\n <\/li>\r\n  \r\n 
  7. \r\n   
    After you have filled out the URL and Link Text fields, click on Add to Menu<\/strong> and Save Menu<\/strong> button. It will insert your link item to the menu on the website.<\/p> \r\n <\/li>\r\n\r\n <\/ol>\r\n \r\n \r\n
    The second variant to add anchor link into the page will be to use HTML tags.<\/strong><\/p>\r\n   
    In order to create anchor links, you should perform the following steps:<\/p>\r\n  
      \r\n  
    1. \r\n   
      Open the page that will include your anchor links and specify ID<\/strong> for some block or section as in the previous example:<\/p> \r\n\"CherryFramework-4.-How-to-use-anchor-links-4\"<\/a>\r\n <\/li>\r\n \r\n 
    2. \r\n   
      The second step will be to use HTML link tag<\/strong>. We have to cover some title or specific part of the content by the HTML structure in order to jump to certain page location. When linking to an anchor on a page, you need to put a # in front of the anchor.\r\n   For example:  <a href=”specific-id”>Title<\/a> <\/strong><\/p>\r\n\r\n\"CherryFramework-4.-How-to-use-anchor-links-5\"<\/a>\r\n <\/li>\r\n \r\n 
    3. You are able to create several anchors in the same page. Press Update<\/strong> button and refresh your page. You will see that after clicking on the title content jump to the certain section or click on the page.<\/p>\r\n <\/li>\r\n  \r\n  <\/ol>\r\n\r\n\r\n
      Feel free to check the detailed video tutorial below:<\/p>\r\n\r\nCherryFramework 4. How to use anchor links<\/a>","protected":false},"excerpt":{"rendered":"
      This tutorial is going to show how to use anchor links in CherryFramework4 templates.<\/p>\n","protected":false},"author":96,"featured_media":59735,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[1017,2012,521],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59726"}],"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\/96"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=59726"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/59726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/59735"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=59726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=59726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=59726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}