{"id":4435,"date":"2024-04-14T10:07:25","date_gmt":"2024-04-14T02:07:25","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=4435"},"modified":"2024-04-14T10:07:25","modified_gmt":"2024-04-14T02:07:25","slug":"summary-of-parts","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/summary-of-parts\/","title":{"rendered":"Summary of Parts"},"content":{"rendered":"\n
\n

Units grant you the authority to form customizable blocks from elements and child elements to uphold a reliable, effective, and expansible design process. You can recycle those blocks throughout your site and adjust them in one place to prevent individually revising each recurrent layout.<\/p>\n

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

    \n
  1. Creating a unit<\/li>\n
  2. Utilizing and reusing a unit<\/li>\n
  3. Modifying a unit<\/li>\n
  4. Disassociating a unit instance from its core unit<\/li>\n<\/ol>\n

    Creating a Unit<\/h2>\n

    You can utilize units to:<\/p>\n

      \n
    • Establish identical content per instance.<\/strong> Establish mirror copies of recurring arrangements that encompass the precise same content, such as navigation bars, footers, and registration forms. Revise them in one spot and witness those modifications influence every instance of that unit.<\/li>\n
    • Establish unique content per instance.<\/strong> Adjust recurring layouts with diverse text, image, video, or rich text to maintain a consistent design while bestowing distinctive content to each instance.<\/li>\n<\/ul>\n

      You can construct a unit from almost any element or group of elements on your site. To create a unit:<\/p>\n

        \n
      1. Select the element you wish to transform into a unit<\/li>\n
      2. Unfold the Design panel<\/strong> or Element configuration<\/strong>panel<\/strong><\/li>\n
      3. Tap the “Create unit” icon at the apex of the panel<\/li>\n
      4. Provide your unit a title and hit Create<\/strong><\/li>\n<\/ol>\n

        You\u2019ll be within the core unit after you’ve initiated a unit \u2014 implying any alterations to the core unit will update across all instances of that unit. Whenever needed, you can access the core unit on any unit instance by:<\/p>\n

          \n
        • Double-tapping the unit instance<\/li>\n
        • Right-tapping and clicking Modify unit<\/strong><\/li>\n
        • Choosing the instance and hitting the “pen<\/strong>” icon in the label<\/li>\n
        • Choosing the instance and hitting the “wrench<\/strong>” icon in the upper-right corner of the Ieft panel<\/li>\n<\/ul>\n

          Learn additional details about altering the core unit. <\/p>\n

          Utilizing and Recycling a Unit<\/h2>\n

          Upon establishing a unit, you can reuse it anywhere in your site. <\/p>\n

            \n
          1. Unfold the Units panel<\/strong><\/li>\n
          2. Tap and pull the desired unit to any page on your site<\/li>\n
          3. Deposit the unit instance directly on the canvas or into the Navigator<\/li>\n<\/ol>\n

            When you select a unit instance, you’ll behold it highlighted and outlined in green. Unfold the Units panel<\/strong> to observe how often each of your units has been utilized on your site.<\/p>\n

            Reminder: <\/strong>Replicating a unit instance is achievable (i.e., copying via copy and paste, right-clicking, or via keyboard shortcuts), but replicating a core unit is not natively feasible currently. Instead, you can detach the unit instance and craft a new unit from that detached element or group of elements. <\/h6>\n

            You can double-tap a unit to access the core unit and review the element hierarchy of the unit in the Navigator panel. You’ll solely be able to survey the unit’s element hierarchy from the core unit (i.e., you won’t be able to observe the unit’s element hierarchy from within a unit instance).<\/p>\n

            Modifying a Unit<\/h2>\n

            Lets proceed through the various methods to engage with and modify a unit: <\/p>\n

              \n
            • Edit the core unit<\/li>\n
            • Exit the core unit<\/li>\n
            • Modify units in the Editor<\/li>\n
            • Alter a unit name<\/li>\n
            • Erase a unit<\/li>\n<\/ul>\n

              Edit the core unit<\/h3>\n

              To implement the same adjustments across all<\/em> instances of a unit, you\u2019ll need to adjust the core unit. You can edit the main unit on any unit instance by:<\/p>\n

                \n
              • Double-tapping the unit instance<\/li>\n
              • Right-tapping and clicking Modify unit<\/strong><\/li>\n
              • Choosing the instance and hitting the “pen<\/strong>” icon in the label<\/li>\n
              • Choosing the instance and hitting the “wrench<\/strong>” icon in the upper-right corner of the lower panel<\/li>\n<\/ul>\n

                Once you’ve selected a unit instance, you can explore the default values for your unit characteristics in the lower panel. Note that this only showcases default values for characteristics if you’ve previously arranged properties on your unit.<\/p>\n

                Unit characteristics enable you to define specific element values (e.g., text, rich text, images, video, and visibility) within the main unit that can be altered on a unit instance. Alternatively, you can associate unit characteristics to a CMS field to bring in data from your CMS Collections. Learn more about defining unit characteristics and changing values on unit instances. <\/p>\n

                Reminder:<\/strong> To amend styles on unit instances, utilize the class<\/code> personalized attribute.<\/h6>\n

                Adjustments to the core unit will impact every unit instance (unless that unit instance has unit characteristics applied to specific elements within the unit). While adjusting the core unit, you can reshuffle the structure and element order to concurrently affect all unit instances throughout your site. <\/p>\n

                For instance, you might own a card design that’s arranged as a unit. The card unit encompasses a title element, a paragraph element, and a button element \u2014 with the button element situated at the very bottom of the card. If you modify the core unit of the card and shift the button from the bottom of the card to the top, that change will influence all occurrences of the card unit across your site.<\/p>\n

                Edits to the core unit affect all unit instances of that unit, except specifically altered in a unit instance. Learn more about defining unit characteristics and altering values on unit instances. \u00a0<\/p>\n

                Exit the core unit<\/h3>\n

                Once you’ve finished adjusting the main unit, you can exit the main unit by:<\/p>\n

                  \n
                • Clicking the “return<\/strong>” arrow at the upper-left corner of the Developer<\/li>\n
                • Clicking outside the unit on the canvas <\/li>\n
                • Pressing Escape<\/strong> on your keypad<\/li>\n<\/ul>\n

                  After ceasing to adjust the core unit, bear in mind that any adjustments you make to elements in a unit instance will solely impact that particular unit instance. <\/p>\n

                  Modify units in the Editor<\/h3>\n

                  If you’ve invited content editors to update your site’s content in the Editor, any modifications they make to unit elements that are not<\/em> altered with a unit characteristic and are consistent across all instances, will apply to all other instances.<\/p>\n

                  Alternatively, if the content editor modifies unit elements that are<\/em> altered via a unit characteristic, those adjustments will solely apply to the unit instance they’re editing.<\/p>\n

                  Alter a Unit Name<\/h3>\n

                  To change a unit name: <\/p>\n

                    \n
                  1. Unfold the Units panel<\/strong><\/li>\n
                  2. Hover over a unit name and click the “pen<\/strong>” icon that materializes to the right of the unit<\/li>\n
                  3. Carry out your alterations and Save<\/strong><\/li>\n<\/ol>\n

                    Delete a Unit<\/h3>\n

                    To fully eradicate a unit:<\/p>\n

                      \n
                    1. Erase or detach all instances of the unit from your site<\/li>\n
                    2. Unfold the Units panel<\/strong><\/li>\n
                    3. Click the “pen<\/strong>” icon that emerges to the right of the unit<\/li>\n
                    4. Hit Delete<\/strong> and verify<\/li>\n<\/ol>\n

                      How to detach a unit instance from its core unit<\/h2>\n

                      To detach a unit instance and adjust it independently from the core unit:<\/p>\n

                        \n
                      1. Right-tap any unit element in the instance you wish to detach<\/li>\n
                      2. Click Unlink instance<\/strong><\/li>\n<\/ol>\n

                        Once detached, if you modify any other linked instance of that unit in your design, it will not impact the detached instance.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Use components to manage recurring layouts and content more efficiently across your site.","protected":false},"author":2,"featured_media":4436,"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-4435","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\/4435","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=4435"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/4435\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/4436"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=4435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=4435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=4435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}