{"id":4306,"date":"2024-04-15T03:36:15","date_gmt":"2024-04-14T19:36:15","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4306"},"modified":"2024-04-15T03:36:15","modified_gmt":"2024-04-14T19:36:15","slug":"components-for-embedding","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/components-for-embedding\/","title":{"rendered":"Components for Embedding"},"content":{"rendered":"\n
\n

Embark on embedding components within one another to construct and maintain intricate layouts more effectively. As an illustration, consider transforming a button into a component. Later on, you can embed this button component into various other components across your site. Placing it within your navigation component, hero section component, or feature card component grants you the flexibility to individually update each component in a centralized location and witness the changes cascade through every other instance.<\/p>\n

This session will teach you:<\/p>\n

    \n
  1. Techniques for embedding an existing component<\/li>\n
  2. Procedure to design a new nested component from portions of an existing component<\/li>\n
  3. Establishing links between nested component attributes and parent component attributes<\/li>\n<\/ol>\n

    Embedding an Existing Component<\/h2>\n

    To embed an existing component within another component:<\/p>\n

      \n
    1. Choose the desired component for placing another component<\/li>\n
    2. Modify the primary component<\/li>\n
    3. Access the Components<\/strong>panel<\/strong> (alternatively, utilize the keyboard shortcut Shift <\/strong>+ A<\/strong>)<\/li>\n
    4. Drag a component from the panel and release it into the selected component on the canvas or in the Navigator<\/li>\n<\/ol>\n

      Creating a New Nested Component from Existing Elements<\/h2>\n

      To craft a fresh component within an existing component:<\/p>\n

        \n
      1. Select the component where you wish to insert another component<\/li>\n
      2. Modify the main component<\/li>\n
      3. Select the desired element for conversion into a component<\/li>\n
      4. Access the Style<\/strong>panel<\/strong> or the Element settings<\/strong>panel<\/strong><\/li>\n
      5. Click the icon labeled \u201ccreate component<\/strong>\u201d at the panel’s top<\/li>\n
      6. Name your new component and hit Create<\/strong><\/li>\n<\/ol>\n

        Furthermore, it’s possible to generate a component from a parent element that already hosts a component, leading to a child component nested inside a parent component.<\/p>\n

        Aligning Nested Component Attributes with Parent Component Attributes<\/h2>\n

        Upon embedding a component \u2014 which already features defined component attributes \u2014 within another component that also holds component attributes, the choice arises to link the nested component\u2019s attributes to the parent component\u2019s attributes. This paves the way for the nested component attributes to leverage altered values from the parent component instances.<\/p>\n

        For instance, envision having a card containing a header, body text, and a button. The card functions as a component, while the button element within the card serves as a component (i.e., a nested component). You retain the option to link the button text to any text within the card, provided that each element within the component comes with defined component attributes.<\/p>\n

        To establish connections between a nested component\u2019s attributes and a parent component\u2019s attributes:<\/p>\n

          \n
        1. Select the parent component housing the nested component and modify its main component<\/li>\n
        2. Modify the main component of the nested component that includes the element(s) requiring linkage to a parent component attribute<\/li>\n
        3. Click on the element<\/li>\n
        4. Navigate to the Element settings<\/strong>panel<\/strong> and create an attribute<\/li>\n
        5. Exit the main component of the nested component<\/li>\n
        6. Move to the primary component of the parent component<\/li>\n
        7. Access the panel on the right<\/li>\n
        8. Click the purple \u201cdot<\/strong>\u201d icon adjacent to the attribute for linkage<\/li>\n
        9. Select \u201cCreate & connect new attribute<\/strong>\u201d and create an attribute<\/li>\n
        10. Exit the main component of the parent component<\/li>\n
        11. Choose the parent component\u2019s instance<\/li>\n
        12. Visit the panel on the right<\/li>\n
        13. Allocate a value to the attribute<\/li>\n<\/ol>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Build complex layouts with nested components.","protected":false},"author":2,"featured_media":4307,"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":[284],"tags":[],"class_list":{"0":"post-4306","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-layout-design","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4306","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=4306"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4306\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4307"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}