---
title: "Adding drop zones to a component"
date: "2017-11-13T08:13:25+00:00"
summary: "Learn how to enhance your Site Studio components with drop zones. Create flexible, nested layouts and containers for accordions, sliders, and more. Follow our step-by-step guide to add, customize, and utilize drop zones effectively."
image:
type: "page"
url: "/drupal-starter-kits/add-ons/site-studio/adding-drop-zones-component"
id: "4ac03748-c6d2-4f7e-9aa3-1b1101dae1a3"
---

Table of contents will be added

You can add Drop zones to your Components to allow other Components or Elements to be nested within them. Drop zones allow your Components to become containers.

For example:

*   Create a Component from an Accordion tabs container and add a Drop zone to place your Accordion tabs items in
*   Create a Component from a Slider container and add a Drop zone to place Slide items in
*   Create a Component with multiple columns and add a Drop zone to each column to make a layout Component

Creating a component with drop zones
------------------------------------

To create a component with drop zones:

1.  Navigate to Site Studio > Components > **Components**
2.  Click on **Edit** to edit a Component
3.  Click on the **+plus button** to open the Sidebar browser
4.  Click the **drop-down arrow** and select **Elements**
5.  Within the Elements list, drag the **Component drop zone** onto your Component layout where you want the editor to be able to drop (nest) other Elements or Components
6.  Double click on the Drop zone element to edit its name. This is the label the editor will see in the Drop zone.

![bdba4848-component-layout-with-dropzones.png](https://acquia.widen.net/content/91d68e84-688f-4ed5-80f7-d5ae426e508d/web/bdba4848-component-layout-with-dropzones.png)

Important

Drop zones allow you to specify where nested Elements will be rendered within your Components layout. It's important that you place your Drop zones in the correct place.

Using a component with drop zones
---------------------------------

When Drop zones are added to a Component they display within the Component when it's added to a page. Editors can drop (nest) other Components or Elements within the Drop zones. The screenshot below shows what a Component with two Drop zones looks like when added to the Layout canvas.

![8a0ee7b0-component-dropzones.png](https://acquia.widen.net/content/2185baaf-96d6-4653-a944-76c6ed6457fb/web/8a0ee7b0-component-dropzones.png)

Important

The screenshot above shows that the Drop zones are always stacked on top of one another, unless a width is set. 

Set the drop zone width
-----------------------

To set the drop zone width:

1.  Navigate to Site Studio > Components > **Components**
2.  Click on **Edit** to edit a Component
3.  Add a drop zone to your Component 
4.  Double click to edit the drop zone
5.  Click Properties > Settings > **Drop zone width**
6.  Select the column width from the select list.

Important

Drop zone widths do not show on the Component Layout canvas when building your Component.

Set the drop zone visibility 
-----------------------------

When the drop zone is empty, you can hide a specific css selector.

1.  Navigate to Site Studio > Components > **Components**
2.  Click on **Edit** to edit a Component
3.  Add a drop zone to your Component 
4.  Double click to edit the drop zone
5.  Type a CSS selector into the visibility input.