Components overview

Components give you the power to create customizable blocks from elements and child elements to maintain a consistent, efficient, and scalable design workflow. You can reuse those blocks across your site and modify them in a single place to avoid individually revising each recurring layout.

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 unlink a component instance from its main component

How to create a component

You can use components to:

• Create identical content per instance. Create identical copies of recurring layouts that have the exact same content, like navbars, 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.

You can create a component from most any element or group of elements on your site. To create a component:

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

You’ll be inside the main component after you’ve created a component — meaning any changes to the main component update across all instances of that component. At any time, you can enter the main component on any component instance by:

• Double-clicking the component instance
• Right-clicking the and clicking Edit component
• 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

Learn more about editing 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
• Right-clicking the and clicking Edit component
• 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 on component instances.

Note: To modify styles on component instances, use the class custom attribute.

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 values on component instances.  

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 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. Click Unlink instance

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