{"id":6646,"date":"2024-04-14T18:16:23","date_gmt":"2024-04-14T10:16:23","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6646"},"modified":"2024-04-14T18:16:23","modified_gmt":"2024-04-14T10:16:23","slug":"index","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/index\/","title":{"rendered":"Index"},"content":{"rendered":"\n
\n

The index component can be utilized to craft enumerated or bulleted records.<\/p>\n

Within this tutorial:<\/strong><\/p>\n

    \n
  1. Include a catalog<\/li>\n
  2. Determine the list style<\/li>\n
  3. Integrate content into a catalog<\/li>\n
  4. Design a catalog<\/li>\n<\/ol>\n

    Include a catalog<\/h2>\n
    \n
    \"The<\/div>\n<\/figure>\n

    To integrate an index element into your website, select the Insert<\/strong> tab (keyboard shortcut: A) and drag an Index<\/strong> onto the Webflow canvas.<\/p>\n

    \n
    \"The<\/div>\n<\/figure>\n

    Determine the list style<\/h2>\n

    Based on the configurations, the main catalog element will either be as an unordered<\/strong> (bulleted) catalog or as an ordered<\/strong> (numbered) catalog. By default, the catalog is initially created as unordered, displaying bullet points to the left of each catalog item. You can toggle between ordered and unordered catalogs using 2 methods:<\/p>\n

      \n
    1. Click on the main catalog element and press Enter<\/strong><\/li>\n
    2. Click on the main catalog element and navigate to the Settings tab<\/strong> > Catalog settings<\/strong>, then modify the type<\/strong><\/li>\n<\/ol>\n
      \n
      \"The<\/div>\n<\/figure>\n

      You can also eliminate the bullets and numbers in the catalog settings by selecting no bullets<\/strong>.<\/p>\n

      \n
      \"The<\/div>\n<\/figure>\n

      Add content into a catalog<\/h2>\n

      By default, the catalog items do not contain any predetermined content. This allows the catalog items to accommodate a variety of content types such as titles, paragraphs, images, videos, and even other catalogs. To incorporate content into a catalog, simply drag the desired content into a catalog item. Alternatively, you can double-click within a catalog item to start typing if plain text is all that is required. Another method to enter text edit mode is to select the catalog item and press Enter\/Return<\/strong>.<\/p>\n

      \n
      \"In<\/div>\n<\/figure>\n

      Embed catalogs<\/h3>\n

      You can embed catalogs by inserting a catalog within a catalog item<\/em> (catalog elements<\/em> cannot be nested).<\/p>\n

      \n
      \"Nested<\/div>\n<\/figure>\n

      To nest a catalog within a catalog item:<\/p>\n

        \n
      1. Drag a Index<\/strong> from the Insert tab <\/strong>onto the canvas<\/li>\n
      2. Embed a sub Index<\/strong> within a catalog item of the parent Index<\/strong><\/li>\n
      3. Add a text element (paragraph, text block, header, etc.) in the catalog item of the parent Index<\/strong> component, above the child Index<\/strong><\/li>\n<\/ol>\n
        Point to note:<\/strong> Ensure you establish the framework of the embedded list before appending text to the catalog item. An embedded list cannot be placed within a parent catalog item after the parent catalog item is edited (although you can add an element<\/em> to the parent list item and still embed a child list afterwards).<\/h6>\n<\/div>\n
        \n
        \"An<\/div>\n<\/figure>\n
        \n
        \"In<\/div>\n<\/figure>\n

        Add new list elements<\/h3>\n

        To incorporate a new item into the list, opt for an existing item copy and paste. Alternatively, right-click a listed item and choose Replicate <\/strong>from the provided menu.<\/p>\n

        \n
        \"The<\/div>\n<\/figure>\n

        Design a list<\/h2>\n

        You have the option to style both the list and its items using the Style panel.<\/p>\n

        Listing<\/h3>\n

        The primary list element \u2014 the ordered list or unordered list \u2014 can be styled by creating a class or modifying the tag. Upon applying styles to the All listings<\/strong> tag or All non-ordered listings<\/strong> tag, you will be defining the standard styling for these elements across your site.<\/p>\n

          \n
        1. Choose the primary Listing<\/strong> element<\/li>\n
        2. Access Style panel<\/strong> > Selector field<\/strong><\/li>\n
        3. Select All ordered listings <\/strong>(or All non-ordered listings<\/strong>)<\/li>\n
        4. Customize your styles<\/li>\n<\/ol>\n
          \n
          \"The<\/div>\n<\/figure>\n

          To adjust the space where the bullets (or numerals) are placed, select the list and modify the left padding<\/strong>.<\/p>\n

          \n
          \"In<\/div>\n<\/figure>\n

          Listing point<\/h3>\n

          You can assign the same class to all items on the list for a unified appearance. Typically, adjusting the lower margin<\/strong> is done to insert space between list items while the left margin<\/strong> is altered to create distance between text and the bullet or numeral.<\/p>\n

          \n
          A \"Primary list item\" class is added to a list item and shown in the Selector field.<\/div>\n<\/figure>\n

          Default styles can be established on all list items across your website by adjusting the All list items<\/strong> tag:<\/p>\n

            \n
          1. Choose a List item<\/strong><\/li>\n
          2. Access Style panel <\/strong>> Selector field<\/strong><\/li>\n
          3. Select the All list items<\/strong> tag<\/li>\n
          4. Insert styles<\/li>\n<\/ol>\n
            Note: <\/strong>Modifying the All list items<\/strong> tag will impact all list items regardless of their placement within an ordered or unordered list.<\/h6>\n
            \n
            \"The<\/div>\n<\/figure>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use the List element to create numbered or bulleted lists of content.","protected":false},"author":2,"featured_media":6647,"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-6646","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\/6646","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=6646"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6646\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6647"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6646"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6646"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6646"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}