With Clutch it is possible to

• add a composition to library and insert it decoupled

• create section template components for use as non-editable elements

• set up components with editable (exposed) properties, slots and variations

Add a composition to library and insert it decoupled

Let’s consider a scenario where you have a Section set up like this:

That is a Section with section HTML tag having section and wrapper classes. This has been marked as a section via the context menu. The Container has container class on it. ‘Vertical Block’s display is set to flex with column flex direction. The Block has two child Blocks having a H2 heading and image.

If this composition is something you find yourself often starting off of from, it makes sense to save it to your library so it can be inserted via the Insert menu with just a couple of clicks.

Simply right click on the Section and Add to library.

Now your composition can be inserted via Insert → Project → Home (or whatever is the name of your page from which you added this to the library).

Since this is a Section, it can also be inserted via Insert → Sections → Home (or whatever is the name of your page from which you added this to the library).

The inserted compositions are decoupled - meaning, changing one won’t affect the other.

Section template components for use as non-editable elements

You may want to add the above and any other similar sections inside the Components mode/view of the project so they can be reused as section templates.

This will help you see and manage all components from a single place.

To do this, right click on the composite and Create component…, accept/provide a name and hit Create.

You’ll see that your component gets wrapped in “Default”. This is a type variant option and won’t be output when you insert/reuse this component.

When the component is inserted (it will be listed under Components → Project), the inserted instance appears as a single element where it is not possible to make any changes.

If you’d like to change this to a composition that gets inserted decoupled, move your section outside the Default and delete Default.

Components with editable properties

It is possible to mark elements within the composition as editable.

With the earlier example, let’s say we want the H2 text and image to have editable/fillable properties in the inserted instance.

Select the heading and in the right side properties panel click text → Add text to <YourComponent>.

Accept the property name or change it to your desired one, ex.: heading and hit return or click Expose.

Similarly, expose the images’ src property.

Then go back to Site view and select any one of your component’s instances (if already present) or insert one and select.

In the right side you should now be able to change the heading and image values for this instance.

Remember that you can also select the heading on the canvas, press Spacebar and type your text.

To delete an unwanted property for a component, edit the component in the component space, click on the property type and delete.

Components with slots

Slots are areas that you define in a component in which other elements/components can be placed.

To add a slot, select any element and click on the outline square icon.

The first slot that you add to a component is children, by default. Any children of the component instance will be rendered in this slot. Reposition the slo if needed by drag and drop anytime.

Slots can be renamed by double clicking the name of the layer.

The same slot can be added multiple times in a component.

Slots enable you to define the overall structure of the component that all instances of this component should have and then fill in other elements/components in these slots depending on the requirements.

Components with variations

We can also create variations of the component.

By default each component gets the type variant whose option is “Default”.

To create another type variant option, click the up/down arrow next to Default → New variant option and give it a name.

This creates a clone of the Default type with the new name. You can make any desired changes here.

You can pick a variant in the properties panel for a component instance.

Variants besides type can also be created.

To quick edit a component, double click on it in the canvas or its layer in the composition panel (on either side of the label) to see it within the context of the current page.