Slots

Use slots for designing flexible components.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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 > Layout, 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 also add a name to your slot in the Element settings panel and a class in the Style panel. You can change the name of the slot property in the Props panel when you have the main component selected.

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. Note that you can’t edit components if they’re in a slot instance.

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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top