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:

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”

After you've created a component, 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 “wrench” icon in the top-right of the right panel
• 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

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.  

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
• Selecting the instance and clicking the “pencil” icon in the label
• Selecting the instance and clicking the “wrench” icon in the top-right of the right panel

When you’ve selected a component instance, you can find the default values for your component properties in the right panel. Note that this only displays default values for properties if you already have properties set up on your component.

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 the “back” arrow at the upper-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.

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

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 navbars, 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, you’ll first need to create component properties on the main component. You can then override these main component properties 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 the Element settings panel
5. Click the purple “dot” icon next to the value for which you’d like to create a property (e.g., visibility, text, etc.)
6. Click Create & connect new property 
7. Define the property's default values (e.g., add text content, set the image, toggle the visibility, etc.)
8. Click Create

Create properties from the Props panel

To create a component property in a main component from the Props panel:  

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 the Props panel
4. Click the “plus” icon to create a new property
5. Choose the property type from the menu
6. 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 to which you want to connect a component property
4. Go to Element settings panel
5. Click the purple “dot” icon next to the value for which you’d like to create a property (e.g., visibility, text, etc.)
6. Choose the component property you want to connect to the selected element from the dropdown

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

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. There, you can modify component property values to customize your content or visibility on the instance (i.e., create unique content for a specific element in the component 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. Go to the right panel
3. 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 an element in the selected component instance right on the canvas. Click the component, then double-click 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.

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 the component instance’s right panel
3. Click the “three disclosure dots” in the upper-right corner
4. Choose Reset all properties

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 the right panel
4. Click the component property’s name (it will be shown in blue)
5. Click Reset to default property value

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. 

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. 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 the “back” arrow at the upper-left corner of the Designer or pressing Esc on your keyboard
9. Select the element you want to connect to your Collection data
10. Go to the right 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. Go to the right panel
4. Click the property’s purple menu
5. Choose Disconnect property

How to manage component properties 

To manage a component’s properties, enter the main component. In the Props panel, you can find a list of the main component’s properties and determine their element connections, adjust their default settings and values, and reorder or delete properties. 

Reorder properties

By default, component properties appear in the Props panel in the order in which they were created. You can click and drag properties to reorder them however you want.

Delete properties

To delete a property in a main component, go to the main component, then go to the Props panel, and click the “trash” icon. If the property is still connected to 1 or multiple component element(s), deleting it will disconnect it from the component element(s). Any content in a connected property will be lost upon property deletion and will be replaced with the default value you’ve set.

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

You can then connect new or existing elements to those properties. Those elements will then reflect the values applied to the previously set properties (e.g., updated text content, images, visibility, etc.).

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

Disconnect properties

You can disconnect properties under the Props panel when editing the main component. To disconnect a property from a component element: 

1. Locate the component that contains the element from which you want to disconnect a property
2. Double-click the component instance to edit the main component
3. Go to the Props panel 
4. Click the property’s name that you want to disconnect
5. Click the name of the element it’s connected to
6. 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. 

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. Select the element you want to make a component
4. Open the Style panel or the Element settings panel
5. Click “Create component” 
6. Give your new component a name and click Create

Additionally, you can create a component from a parent element that already contains a component. This results in a child component nested inside a parent component. 

Connect nested component properties to parent component properties

When you nest a component — that already 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. Edit the main component of the nested component whose element(s) you want want to connect to a parent component property
3. Click on the element
4. Go to the Element settings panel and create a property
5. Exit the main component of the nested component
6. Go to the main component of the parent component
7. Go to the right panel
8. Click the purple “dot” icon to the left of the property you want to connect
9. Click “Create & connect new property” and create a property
10. Exit the main component of the parent component
11. Select the parent component’s instance
12. Go to the right panel
13. Choose a value for the property

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.