Use slots for designing flexible components.
Slots are elements you can place in existing components that act as placeholders for other components. This allows you to build components modularly — that is, you can modify component instances to hold different components — offering more flexibility and versatility to your site’s design.
How to add slots to main components
To add a slot to a main component, edit the main component, go to Add panel > Elements, and drag a Slot element into your component on the canvas or in the Navigator. A slot property will automatically be created. You can position a slot anywhere in your component.
You can rename a slot when editing the main component by double-clicking its name in the Navigator or at the top of the right panel, or by right-clicking the slot on the canvas and choosing Rename. The slot name will also appear on each instance of the component. You can also add a class in the Style panel.
You can add display settings to your slot and future components added to the slot will follow those display rules. By default, a slot is a div but you can change that in the Element settings panel by setting its semantic tag.
Note
You cannot add a slot into regular lists, Collection lists, or links.
How to edit slots on component instances
Once you’ve placed your slot in the main component, you can add components to that slot on component instances. To add components to a slot, drag components from the Components panel into the slot.
You can also nest slots within slots, by adding a slot to a component, then adding that component to an existing slot. This is a powerful workflow for creating adjustable designs.
You can’t bind a slot property to a parent slot property. However, if you have a nested component in a component containing a slot you can add a slot into that component’s slot as a workaround.
Note
If you copy and paste a slot, all content in that slot will copy and paste too.
If you delete a slot from a component, all elements added to that slot will also be deleted for each of the component’s instances.
Restrict which components are allowed in a slot
Before you get started
You need the Designer role or higher to restrict components for slots. The restriction applies to the Marketer role and custom roles based on the Marketer role.
By default, a slot accepts any component. If you want more control, you can restrict a slot to only allow specific components, so anyone with the Marketer role building with that component stays within the boundaries you set.
Once you set allowed components for a slot, marketers see a filtered list when they use the add button on the slot or open the Components panel with the slot focused, so they only see components that are allowed there. If they try to add a restricted component using another method, like Command+K, they'll see an error indicating that the component can't be used.
To restrict the components allowed in a slot:
- Open the Components panel, hover over the component you want to edit and click Open component
- Select the slot you want to restrict
- Click the Settings tab
- Under Allowed components, click Choose components
- Choose the components you want to allow in that slot
- Click Save
Good to know
Restrictions only apply going forward. If a slot already had a restricted component added to it before you applied the restriction, those existing instances won’t be affected or flagged.
To remove a component from the allowed list or reset the list to allow all:
- Open the Components panel, hover over the component you want to edit and click Open component
- Select the slot you want to restrict
- Click the Slot settings tab
- To remove a component from the list: click the trash icon to the right of the component
- To reset the list: click Choose components > Allow all