#Click and drag on elements in order how to
#Click and drag on elements in order update

Learn more about defining component properties and modifying values. Or, you can connect component properties to a CMS field to pull in data from your CMS Collections. In the component instance view, you can find the default values for your component properties in the Element settings panel.Ĭomponent 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. In this example, the button is shown in the Style panel. Open the Style, Element settings, or Interactions panels, and click the “Edit component” button to edit the main component. 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). You can double-click a component to enter the main component and view the component’s element hierarchy in the Navigator panel. Instead, you can unlink the component instance and create a new component from that unlinked element or group of elements. 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. You can also add components onto the canvas using quick find with the keyboard shortcut Command + E (on Mac) or Control + E (on Windows). Open the Components panel to see how many times each of your components has been used in your site. When you select a component instance, you’ll see it highlighted and outlined in green.

Drop the component instance directly on the canvas or into the Navigator for more precision.

Click and drag the desired component to any page in your site.

Once you’ve created a component, you can reuse it anywhere in your site. (Use the keyboard shortcut Shift + A to open directly to your components.)

#Click and drag on elements in order how to

How to use and reuse a componentĪccess components from the Components panel.

Pressing Control on your keyboard and double-clicking the instanceįor additional details, check out how to edit the main component.

Selecting the instance and using the keyboard shortcut Control + Enter.

Selecting the instance and clicking the Edit component button from the Style, Element settings, or Interactions panels.

Selecting the instance and clicking the Edit component “pencil” icon in the label.

Right-clicking the instance and choosing Edit component.

At any time, you can enter the main component on any component instance by:

#Click and drag on elements in order update

All changes to the main component will update across all instances of that component. Press Command + Shift + A (on Mac) or Control + Shift + A (on Windows)Īfter you've created a component using 1 of the methods outlined above, you’ll be editing the main component.

You can create a new component by using the shortcut keys on your keyboard to open the Components panel: Give your component a name and click “ Create”.Click “ Create component” at the top of the panel.Open the Style panel or Element settings panel.Select the element you want to turn into a component.You can create a new component by using the “Create component” button that appears in different panels: Create by clicking the “Create component” buttonĬreate by clicking the “Create component” button.You can create a component from most any element or group of elements in your site. How to use components in Collection lists and Collection pages.How to unlink a component instance from its main component.How to modify property values on component instances.Modify recurring layouts with different text, image, video, or rich text to maintain a consistent design while giving each instance unique content. Edit them in one place and see those changes impact every instance of that component. Create identical copies of recurring layouts that have the exact same content, like nav bars, footers, and sign-up forms. Create identical content per instance.

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