Components

Components allow you to maintain a consistent, efficient, and scalable design workflow by creating customizable blocks from elements and child elements. Reuse those blocks across your site, and modify them in a single place to avoid individually revising each recurring layout.

You can use components to:

• Create identical content per instance. Create identical copies of recurring layouts that have the exact same content, like nav bars, footers, and sign-up forms. Edit them in one place and see those changes impact every instance of that component.
• Create unique content per instance. Modify recurring layouts with different text, image, video, or rich text to maintain a consistent design while giving each instance unique content. 

In this lesson, you’ll learn:

1. How to create a component
2. How to use and reuse a component
3. How to edit a component
4. How to define component properties
5. How to modify property values on component instances
6. How to connect properties to CMS data 
7. How to manage component properties
8. How to nest components
9. How to unlink a component instance from its main component
10. How to use components in Collection lists and Collection pages

How to create a component

You can create a component from most any element or group of elements in your site. You can do this in 1 of 4 ways:

• Create by clicking the “Create component” button 
• Create by right-clicking an element
• Create by opening the components panel
• Create by using a keyboard shortcut

Create by clicking the “Create component” button

You can create a new component by using the “Create component” button that appears in different panels:

1. Select the element you want to turn into a component
2. Open the Style panel or Element settings panel
3. Click “Create component” at the top of the panel
4. Give your component a name and click “Create”

Create by right-clicking an element

You can create a new component by selecting an element and right-clicking it:

1. Select the element you want to turn into a component
2. Right-click and choose Create component
3. Give your component a name and click “Create”

Create by opening the components panel

You can create a new component directly from the Components panel:

1. Select the element you want to turn into a component
2. Open the Components panel (or use the keyboard shortcut Shift + A)
3. Click “Create new component”
4. Give your component a name and click “Create”

Create by using a keyboard shortcut

You can create a new component by using the shortcut keys on your keyboard to open the Components panel:

1. Select the element you want to turn into a component
2. Press Command + Shift + A (on Mac) or Control + Shift + A (on Windows)
3. Give your component a name and click “Create”

After you've created a component using 1 of the methods outlined above, you’ll be editing the main component. All changes to the main component will update across all instances of that component. At any time, you can enter the main component on any component instance by:

• Right-clicking the instance and choosing Edit component
• Selecting the instance and clicking the Edit component “pencil” icon in the label
• Selecting the instance and clicking the Edit component button from the Style, Element settings, or Interactions panels
• Selecting the instance and using the keyboard shortcut Control + Enter 
• Pressing Control on your keyboard and double-clicking the instance

For additional details, check out how to edit the main component. 

How to use and reuse a component

Once you’ve created a component, you can reuse it anywhere in your site. 

1. Open the Components panel
2. Click and drag the desired component to any page in your site
3. Drop the component instance directly on the canvas or into the Navigator for more precision

When you select a component instance, you’ll see it highlighted and outlined in green. Open the Components panel to see how many times each of your components has been used in your site.  

You can also add components onto the canvas using quick find with the keyboard shortcut Command + E (on Mac) or Control + E (on Windows). Learn how to use quick find.

Note: Duplicating a component instance is possible (i.e., duplicating via copy and paste, right-clicking, or by using keyboard shortcuts), but duplicating a main component is not natively possible at this time. Instead, you can unlink the component instance and create a new component from that unlinked element or group of elements. 

You can double-click a component to enter the main component and view the component’s element hierarchy in the Navigator panel. You’ll only be able to see the component’s element hierarchy from the main component (i.e., you won’t be able to view the component’s element hierarchy from within a component instance). 

How to edit a component

Let’s walk through the various ways you can interact with and edit a component: 

• Edit the main component
• Exit the main component
• Edit components in the Editor
• Rename a component
• Delete a component

Edit the main component

To make the same changes across all instances of a component, you’ll need to edit the main component. You can edit the main component on any component instance by:

• Double-clicking the component instance
• Right-clicking the instance and choosing Edit component
• Selecting the instance and clicking the “pencil” icon in the label
• Selecting the instance and clicking the Edit component button in the Style, Element settings, or Interactions panels
• Selecting the instance and using the keyboard shortcut Enter 

In the component instance view, you can find the default values for your component properties in the Element settings panel.

Component properties let you define specific element values (e.g., text, rich text, images, video, and visibility) within the main component that can be modified on a component instance. Or, you can connect component properties to a CMS field to pull in data from your CMS Collections. Learn more about defining component properties and modifying values. 

Note: Support to modify style properties is under development.

Edits to the main component will affect every component instance (unless that component instance has component properties applied to specific elements within the component). 

When editing the main component, you can change the structure and element order to simultaneously affect all component instances across your site. 

For example, you might have a card design that’s set up as a component. The card component contains a heading element, a paragraph element, and a button element — with the button element placed at the very bottom of the card. If you edit the main component of the card and move the button from the bottom of the card to the top, that change will affect all instances of the card component across your site.

Edits to the main component affect all instances of that component, unless specifically modified in a component instance. Learn more about defining component properties and modifying content. 

Exit the main component

Once you’re done editing the main component you can exit the main component by:

• Clicking Back to instance in the top left corner of the Designer
• Clicking outside the component on the canvas 
• Pressing Escape on your keyboard

After you’ve stopped editing the main component, keep in mind that any edits you make to elements in a component instance will only affect that specific component instance. 

Edit components in the Editor

If you’ve invited content editors to update your site’s content in the Editor, any changes they make to component elements that are not modified with a component property and are consistent across all instances, will apply to all other instances. 

This is also indicated by an informational note that appears when hovering over the element to be edited. 

Alternatively, if the content editor makes changes to component elements that are modified via a component property, those changes will only apply to the component instance they’re editing.

Rename a component

To rename a component: 

1. Open the Components panel 
2. Hover over a component name and click the “pencil” icon that appears to the right of the component
3. Make your changes and Save

To rename a component using quick find: 

1. Hover over the component’s name in the search result 
2. Click the “pencil” icon that appears to the right of the component
3. Make your changes and Save

Note: Access quick find with the keyboard shortcut Command + E (on Mac) or Control + E (on Windows). Learn how to use quick find.

Delete a component

To delete a component completely:

1. Remove or unlink all instances of the component from your site
2. Open the Components panel
3. Click the “pencil” icon that appears to the right of the component
4. Click “Delete” and confirm

How to define component properties 

Note: If you’re creating a component that will have the exact same content in each instance (like nav bars, footers, and some forms), you don’t need to create component properties for that component’s elements.

Component properties let you define specific elements within a component that can be modified with unique values on a component instance. 

This is great for recurring layout patterns whose structure should be uniform, but that have unique content in each instance. Or, you might want to slightly adjust the structure by hiding or showing specific elements in different component instances.

Let’s walk through: 

• Supported properties
• How to create component properties 

Supported properties

Supported component properties include: 

• Content properties (to modify content in a component instance)
• Visibility properties (to hide or show an element in a component instance)

Note: Support to modify style properties is under development.

Content properties

Content properties allow you to customize your element content in a component instance. For example, let’s say you have a hero section design that you want to use in multiple pages across your site. The design structure doesn’t need to change, but you do need different paragraph content in each component instance. You can create a component property for your paragraph, and modify that paragraph content anywhere the instance appears in your site. 

Supported elements include:

• Text (e.g., paragraphs, headings, etc.)
• Image
• Video 
• Link (e.g., buttons, link blocks)
• Rich text

Visibility properties

Visibility properties allow you to flexibly create layout variations on different component instances by showing or hiding specific elements. 

For example, you could create navbar variations by showing and hiding links or buttons within the navbar component. Or you could create button variations by showing and hiding different icons. You could even create entire section variations by showing and hiding multiple different elements in the component, like images, videos, buttons, links, and more. 

Visibility properties can be used on all elements.

‍

Pro tip: If you’re having trouble selecting a hidden element in a component instance, open the Navigator, and select the hidden element from within the component’s element hierarchy. 

Good to know: Elements set to “hidden” are removed from the DOM (Document Object Model) order. Because the DOM order specifies the logical structure of sites and the way they’re accessed and manipulated, this means hidden component elements won’t be read by an assistive device, and promotes a more accessible experience for your site visitors. It also eliminates repeated content, and doesn’t negatively affect SEO.

How to create component properties

To modify property values for component instances on your site, you’ll first need to create component properties on the main component. You can then override these main component properties directly on the canvas or in the Element settings panel to create custom content on different component instances.

You can create a new property on the main component and concurrently connect that property to a specific element within your component. Alternatively, you can create component properties directly on the main component and connect elements to component properties later. 

Create and connect component properties

You can create a new property on the main component and connect that property directly to a specific element within your component. To create a new property and connect it to an element: 

1. Locate the component that contains the element you want to modify
2. Double-click the component instance to edit the main component
3. Select the element for which you want to create a component property 
4. Go to Element settings panel 
5. Go to the element’s settings section (depending on the element you’ve selected, the section heading will look slightly different, e.g., Heading 1 settings, Image settings, etc.)
6. Click the purple “dot” icon next to the value for which you’d like to create a property (e.g., visibility, text, etc.)
7. Click Create & connect new property 
8. Give your new property a name based on its function in your site design (e.g., “Button visibility,” “Heading text,” etc.)
9. Click Create property
10. Click the purple menu for the new property you just created
11. Click Property settings
12. Define your property’s default values (e.g., change the default text content, set an image, toggle the visibility, etc.) 

After you modify the element’s property values and exit the main component, with the element still selected, the new component property will be available in the Element settings panel under Component properties, where you can edit the value for the selected component instance (i.e., create custom content for the specific element you’ve selected within the component instance). 

You can also edit the value for the selected element’s content in the component instance right on the canvas by double-clicking the element you want to edit within the component instance. Elements connected to component properties are indicated with a dotted green outline on the canvas within the component instance. Learn more about modifying property values.

Create properties from Element settings

To create a component property in a main component from Element settings:  

1. Locate the component that contains the element you want to modify
2. Double-click the component instance to edit the main component
3. Go to Element settings panel > Component properties > Manage properties
4. Click the “plus” icon to create a new property
5. Choose the type, give the property a name based on its function in your design, and define its default values (e.g., add text content, set the image, toggle the visibility, etc.)

Then, to connect a property to an element: 

1. Locate the component that contains the element you want to modify
2. Double-click the component instance to edit the main component 
3. Select the element for which you want to create a component property
4. Go to Element settings panel 
5. Open the element’s settings section (depending on the element you’ve selected, the section heading will look slightly different, e.g., Heading 1 settings, Image settings, etc.)
6. Click the purple “dot” icon next to the value for which you’d like to create a property (e.g., visibility, text, etc.)
7. Choose the component property you want to connect to the selected element from the dropdown

After you modify the element’s property values and exit the main component, with the element still selected, the new component property will be available in the Element settings panel under Component properties, where you can edit the value for the selected component instance (i.e., create custom content for the specific element you’ve selected within the component instance). 

You can also edit the value for the selected element’s content in the component instance right on the canvas by double-clicking the element you want to edit within the component instance. Elements connected to component properties are indicated with a dotted green outline on the canvas within the component instance. Learn more about modifying property values.

How to modify property values on component instances

After you’ve created a property, exit the main component to go back to the individual component instance. Here you can modify component property values to customize your content or visibility on the instance. 

You can modify your component instances in 2 ways:

• Modify properties with static values
• Connect properties to CMS data

 Learn about the differences between static and dynamic content.

Modify properties with static values

The quickest way to edit static content in component properties is to:

1. Locate the component instance that contains the element whose values you want to modify
2. Select the element on the canvas 
3. Go to Element settings panel > Component properties
4. Modify the element’s property values (e.g., update the text, replace an image, set the visibility, etc.)

You can also edit the value for the selected component instance right on the canvas by double-clicking the element you want to edit within the component instance. 

Good to know: You can also view and modify your selected component instance’s element property values by opening the Element settings panel and modifying values directly from there. 

To revert component properties to their default values, you can choose to reset all properties at once, or reset them individually. 

To reset all properties to their default values at once:

1. Select the component instance on the canvas 
2. Go to Element settings panel > Component properties
3. Click the “back arrow” icon and choose “Reset all”

To reset a single property to its default value:

1. Locate the component instance that contains the element whose value you want to reset
2. Select the element on the canvas
3. Go to Element settings panel > Component properties
4. Click the component property’s name (it will be shown in blue)
5. Click “Reset”

Connect properties to CMS data

To reuse layouts across different CMS Collection pages while preserving a consistent design, you can also connect and display CMS collection data in your component instances without needing to unlink from the main component.

You can connect properties to the following CMS fields:

• Date / Time
• Plain text
• Email
• Phone
• Video link
• Link
• Option
• Number
• Image
• Rich text
• File
• Reference

Keep in mind that you must have already created a Collection in your site in order to connect component properties to the Collection field data. Learn more about CMS Collections and Collection fields. 

Note: Support for use with Collection lists is under development.

To connect a component property to CMS Collection data on a Collection page: 

1. Open Pages panel > CMS Collection pages and choose the page that contains your component
2. Double-click the component instance to edit the main component
3. Go to Element settings panel > Component properties > Manage properties and create component properties if properties don’t already exist for the elements you want to connect them to
4. Select the element you want to connect to your Collection data
5. Go to Element settings panel 
6. Click the purple “dot” icon next to the value for which you’d like to connect a component property (e.g., text, image, visibility, etc.)
7. Choose the component property you want to connect to the selected element from the dropdown 
8. Exit the main component by clicking “Back to instance” or pressing Esc on your keyboard
9. Select the element you want to connect to your Collection data
10. Go to Element settings panel
11. Click the purple “dot” icon next to the component property’s modifiable content (e.g., text, image, visibility, etc.)
12. Choose the Collection field from the menu (e.g., Name, Published on, Thumbnail image, etc.)

The component instance will now display the selected Collection field’s content (as long as the Collection field is populated with data in your Collection).

To disconnect an element from a Collection field:

1. Open Pages panel > CMS Collection pages and choose the page that contains your component
2. Select the component element you want to disconnect
3. Open the Element settings panel
4. Click the property’s purple menu
5. Choose “Disconnect property”

How to manage component properties 

By managing properties in the Element settings panel, you can see a list of your main component’s properties, determine whether they’re connected or disconnected from elements in your component, and can interact with each of the properties to adjust default settings and property values.

Access the Manage properties section

You can access the Manage properties section of the Element settings panel in 1 of 2 ways:

• Manage properties through the component’s parent element
• Manage properties via a component’s child element

Manage properties through the component’s parent element

1. Select your component’s parent element
2. Open the Element settings panel
3. Click “Edit component” 
4. Go to Component properties > Manage properties

Manage properties via a component’s child element

Alternatively, you can also manage component properties if you have first clicked a child element of the component (instead of the parent element):

1. Select the child element of your component
2. Open the Element settings panel
3. Click “Edit component” 
4. Open the element’s settings section (depending on the element you have selected, the section heading will look slightly different, e.g., Heading 1 settings, Image settings, etc.)
5. Click the purple dropdown menu and choose “Manage all properties” 

Interact with each component property

From here, you can interact with each component property to: 

• Update the default values of a property
• Rename a property
• Determine which element is connected to a property
• Delete a property 
• Add a new property
• Disconnect a property

Update the default values of a property

To update a default property’s values:

1. Open the Manage properties section of the Element settings panel
2. Click any property listed under Manage properties to open that property’s settings
3. Click the “Type” dropdown to modify the property type (e.g, text, rich text, video, etc.)
4. Click into any additional fields to update the default values (e.g., URL, text content, etc.)

Rename a property

To rename a property:

1. Open the Manage properties section of the Element settings panel
2. Click any property listed under Manage properties to open that property’s settings 
3. Click the “Name” field and rename the property based on its function in your design

Determine which element is connected to a property

To determine which element (or elements) are connected to a property:

1. Open the Manage properties section of the Element settings panel
2. Click any property listed under Manage properties to open that property’s settings 
3. View the connected element list at the bottom of the settings modal window
4. Click any connected element from the list to access that specific element’s settings

Delete a property

To delete a property:

1. Open the Manage properties section of the Element settings panel
2. Hover over the property’s name
3. Click the “trash” icon

If the property is still connected to a component element and you delete it, you’ll be warned that deleting the property will disconnect it from that component element (or multiple elements if it was connected to several elements in the component). 

The properties will still be defined in the main component until you delete them, and their values will still appear on the component instances in which they were created until they are deleted from each instance separately.

To delete component properties separately from each instance: 

1. Select your component instance’s parent element
2. Open the Element settings panel 
3. Locate any disconnected component property (disconnected properties are yellow)
4. Click the component property’s name
5. Click “Delete”

Delete and reconnect elements to previously set component properties

If you delete an element from the main component, each corresponding element in other component instances will also be deleted (even if they’ve been modified with unique content via component properties). However, component properties and their applied values will still remain for each instance (even if the element originally connected to that property has been deleted). 

Because previously used component properties remain, you can connect new or existing elements to them. Those elements will then reflect the values applied to the previously set properties (e.g., updated text content, images, visibility, etc.). You can even connect multiple elements to the same property so each of the elements display the same content or visibility settings.

For example, let’s say you’ve created an interaction with 2 different states, but you need content in each state to always be the same. You can connect elements in each state to the same property and your values will remain consistent. 

Add a new property

To add a new property:

1. Open the Manage properties section of the Element settings panel
2. Click the “plus” icon to create a new property
3. Choose the “Type,” give the property a name based on its function in your design, and update its unique values (e.g., add text content, set the image, toggle the visibility, etc.)

Note: Your new property will be disconnected until you connect a component element to it.

Disconnect a property

You can disconnect properties under the Manage properties section of the main component. To disconnect a property from a component element: 

1. Open the Manage properties section of the Element settings panel
2. Click the property’s name that you want to disconnect
3. Click the element it’s connected to
4. Click the element’s purple dropdown menu under its settings and choose “Disconnect property”

Note: If your property is connected to multiple elements, you’ll need to repeat the disconnecting process for each connected element. 

You can now click the purple “dot” icon (or purple dropdown menu) to choose another property to connect to that specific element.

How to nest components

You can nest components within other components to build and maintain complex layouts more easily and efficiently. For example, you can make a button a component. You can then nest that button component inside various other components in your site. You could put it inside your navigation component, your hero section component, or your feature card component. 

This allows you to independently update each component in 1 place and see those changes impact every other instance.

You can nest components in 2 ways: 

• Nest an existing component
• Create a new nested component from elements in an existing component

Nest an existing component

To nest an existing component into another existing component:

1. Select the component in which you want to place another component
2. Edit the main component
3. Open the Components panel (or use the keyboard shortcut Shift + A)
4. Drag a component from the panel into the selected component on the canvas or in the Navigator, and release

Create a new nested component from elements in an existing component

To create a new component inside an existing component:

1. Select the component in which you want to place another component
2. Edit the main component
3. Open the Style panel or the Element settings panel
4. Click “Create component” 
5. Give your new component a name and click Create

Good to know: You can also create a new nested component by editing the main component. Then, right-click the element you want to turn into a new, nested component and choose “Create component.” Or, use the keyboard shortcut Command + Shift + A (on Mac) or Control + Shift + A (on Windows).

Additionally, you can create a component from a parent element that already contains a component. For example, let’s say you have a non-component card (e.g., a div block) that contains a button element. You’ve turned the button element into a component. Now you want to turn the entire card into a component, too. Select the button component’s parent element (i.e., the card div block) and create a new component from the div block. This results in the button component being nested inside the card div block component.  

Connect nested component properties to parent component properties

When you nest a component (that has component properties set) within another component that also has component properties set, you have the option to connect the nested component’s properties to the parent component’s properties. This means the nested component properties can use modified values from the parent component instances. 

For example, let’s say you have a card. In that card is a heading, some paragraph text, and a button. The card is a component. The button element inside the card is also a component (i.e., a nested component). You can choose to connect the button’s text to any of the card’s text, as long as each element in the component has component properties set. 

To link a nested component’s properties to a parent component’s properties:

1. Select the parent component of the nested component and edit the main component
2. Select the nested component whose element(s) you want want to connect to a parent component property 
3. Open the Element settings panel > Component properties
4. (Optional) Click “Create” if no component property exists for the element you want to modify, and continue to step 6
5. Locate the component property you want to connect to the parent component property
6. Click the purple “dot” icon (or the purple menu if the property is already connected)
7. Choose the name of the parent component property to connect

How to unlink a component instance from its main component

To unlink a component instance and make changes to it independent of the main component:

1. Right-click any component element in the instance you want to unlink
2. Choose Unlink instance 

Once unlinked, if you edit any other linked instance of that component in your design, it will not change the unlinked instance.

How to use components in Collection lists and Collection pages

You can add or create a component inside Collection list items and Collection pages. Then, you can connect Collection fields to component properties and use dynamic data in your components.

To add a component to a Collection list item, create the component outside of the Collection list, then drag it into the Collection list item on the canvas or in the Navigator.

If a Collection list item is already connected to a CMS Collection, you won’t be able to create a component from the Collection list item. To connect an existing Collection list item to a component, disconnect all CMS fields, make the Collection list item a component, then reconnect the Collection list item to the CMS Collection.