Summary of Parts

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.

During this session, you’ll understand:

1. Creating a unit
2. Utilizing and reusing a unit
3. Modifying a unit
4. Disassociating a unit instance from its core unit

Creating a Unit

You can utilize units to:

• Establish identical content per instance. 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.
• Establish unique content per instance. Adjust recurring layouts with diverse text, image, video, or rich text to maintain a consistent design while bestowing distinctive content to each instance.

You can construct a unit from almost any element or group of elements on your site. To create a unit:

1. Select the element you wish to transform into a unit
2. Unfold the Design panel or Element configurationpanel
3. Tap the “Create unit” icon at the apex of the panel
4. Provide your unit a title and hit Create

You’ll be within the core unit after you’ve initiated a unit — 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:

• Double-tapping the unit instance
• Right-tapping and clicking Modify unit
• Choosing the instance and hitting the “pen” icon in the label
• Choosing the instance and hitting the “wrench” icon in the upper-right corner of the Ieft panel

Learn additional details about altering the core unit.

Utilizing and Recycling a Unit

Upon establishing a unit, you can reuse it anywhere in your site.

1. Unfold the Units panel
2. Tap and pull the desired unit to any page on your site
3. Deposit the unit instance directly on the canvas or into the Navigator

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

Reminder: 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.

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).

Modifying a Unit

Lets proceed through the various methods to engage with and modify a unit:

• Edit the core unit
• Exit the core unit
• Modify units in the Editor
• Alter a unit name
• Erase a unit

Edit the core unit

To implement the same adjustments across all instances of a unit, you’ll need to adjust the core unit. You can edit the main unit on any unit instance by:

• Double-tapping the unit instance
• Right-tapping and clicking Modify unit
• Choosing the instance and hitting the “pen” icon in the label
• Choosing the instance and hitting the “wrench” icon in the upper-right corner of the lower panel

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.

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.

Reminder: To amend styles on unit instances, utilize the class personalized attribute.

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.

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 — 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.

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.  

Exit the core unit

Once you’ve finished adjusting the main unit, you can exit the main unit by:

• Clicking the “return” arrow at the upper-left corner of the Developer
• Clicking outside the unit on the canvas
• Pressing Escape on your keypad

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.

Modify units in the Editor

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 altered with a unit characteristic and are consistent across all instances, will apply to all other instances.

Alternatively, if the content editor modifies unit elements that are altered via a unit characteristic, those adjustments will solely apply to the unit instance they’re editing.

Alter a Unit Name

To change a unit name:

1. Unfold the Units panel
2. Hover over a unit name and click the “pen” icon that materializes to the right of the unit
3. Carry out your alterations and Save

Delete a Unit

To fully eradicate a unit:

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

How to detach a unit instance from its core unit

To detach a unit instance and adjust it independently from the core unit:

1. Right-tap any unit element in the instance you wish to detach
2. Click Unlink instance

Once detached, if you modify any other linked instance of that unit in your design, it will not impact the detached instance.