{"id":5497,"date":"2024-04-14T11:40:54","date_gmt":"2024-04-14T03:40:54","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=5497"},"modified":"2024-04-14T11:40:54","modified_gmt":"2024-04-14T03:40:54","slug":"category-connection","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/category-connection\/","title":{"rendered":"Category\u2008connection"},"content":{"rendered":"\n
\n

Category connections or marker links allow you to associate with specific segments or components on your website. To generate a marker link for a category, you’ll first have to establish an element ID on that category.<\/p>\n

Remark:<\/strong> An element ID can also be utilized in personalized code to indicate a style in a style sheet or to operate a particular component with JavaScript. Nevertheless, the most frequent utilization for an ID is in category connections or marker links to diverse divisions on a page.<\/h6>\n

In this session, you\u2019ll understand:<\/p>\n

    \n
  1. How to assign an element ID<\/li>\n
  2. How to set up a category connection<\/li>\n
  3. How to connect to a category on a separate page<\/li>\n
  4. How to connect to a category on the front page<\/li>\n<\/ol>\n

    How to assign an element ID<\/h2>\n

    You can designate an ID to any selected element.<\/p>\n

      \n
    1. Choose the element that should be allocated the ID<\/li>\n
    2. Expand Element settings panel <\/strong>and enter a unique ID in the ID<\/strong> field<\/li>\n<\/ol>\n
      Remark: <\/strong>An element ID must consist of at least one character and must not contain any blank characters. Furthermore, an element ID needs to be unique for each element. Learn more about rectifying duplicate element IDs.<\/h6>\n
      \n
      \"An<\/div>\n<\/figure>\n

      How to set up a category connection<\/h2>\n
        \n
      1. Choose the connection element that you wish to guide you to a section on your page<\/li>\n
      2. Expand Element<\/strong>settings panel<\/strong> > Link settings<\/strong><\/li>\n
      3. Select the Page section<\/strong> button<\/li>\n
      4. Choose the Section<\/strong> dropdown menu and select the ID you recently established (e.g., \u201cMagic-section\u201d)<\/li>\n<\/ol>\n
        \n
        The \"Magic-section\" instance ID is a choice in the Section dropdown in the Link settings section of the Element settings panel.<\/div>\n<\/figure>\n

        How to connect to a category on a separate page<\/h2>\n

        If you desire a link element, such as a button, to direct to a category on a different page (excluding the front page):<\/p>\n

          \n
        1. Expand Element settings panel<\/strong> > Link settings<\/strong><\/li>\n
        2. Choose the URL<\/strong> link style<\/li>\n
        3. Input the URL of the page where the category exists followed by \u201c#<\/strong>\u201d and the element ID you designated to that category<\/li>\n<\/ol>\n

          Here’s how your marker links would seem:<\/p>\n

            \n
          • a page in your ongoing site: site.com\/page#section-ID<\/strong><\/li>\n
          • if your page is nested in a directory: site.com\/folder\/page#section-ID<\/strong><\/li>\n
          • a marker link on another webpage: site.com\/folder\/page#section-id<\/strong><\/li>\n
          • a front page marker link would look like: site.com\/#section-id<\/strong><\/li>\n<\/ul>\n

            Illustrations<\/h3>\n

            On this page, we have 4 category connections that link to the 4 article divisions on this page.<\/p>\n

              \n
            1. How to assign an element ID<\/li>\n
            2. How to set up a category connection<\/li>\n
            3. How to connect to a category on a separate page<\/li>\n
            4. How to connect to a category on the front page<\/li>\n<\/ol>\n

              To guide to the concluding section of this page, the URL is: https:\/\/university.webflow.com\/lesson\/section-link#how-to-link-to-a-section-on-the-homepage<\/strong><\/p>\n

              \n
              An example URL for a button is set to \"site.com\/page#Section-ID\" in the Link settings section of the Element settings panel.<\/div>\n<\/figure>\n

              How to connect to a category on the front page<\/h2>\n

              To link to a category on your front page, the page title is not essential in the marker link URL. Instead, insert the front page domain followed by \u201c#\u201d and then the category ID. (e.g., A front page marker link would look like: site.com\/#section-id<\/strong>)<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Set an element ID and use it to create an anchor link that takes you to a section on a page.","protected":false},"author":2,"featured_media":5498,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-5497","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5497","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=5497"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/5497\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5498"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=5497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=5497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=5497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}