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 DX8 > 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 DX8 > 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.


    Cohesion DX8 Help center

    Launch our Help center to raise a support ticket or search our knowledge base of common questions and answers.

    DX8 knowledge base icon

    Knowledge base

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

    Find answers

    Raise a ticket icon

    Raise a support ticket

    Log in to the Help center to raise an issue. Available Monday - Friday, 09:00 - 17:00 GMT.

    Raise ticket