Version:

    Adding drop zones to a component

    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.

    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.

    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.

    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.
    DX8 knowledge base icon

    Frequently asked questions

    Get instant answers to common questions. Available online 24/7.

    Find answers

    Raise a ticket icon

    Raise a support ticket

    To raise a ticket, sign into Acquia Cloud and select Help in the top menu.

    Raise support ticket

    Acquia

    Copyright © 2020 Acquia, Inc. All Rights Reserved. Drupal is a registered trademark of Dries Buytaert.