Documentation

Defining Fragment Drop Zones

Drop zones are integral to building your Content Pages. With them, you can create unique Page layouts and dynamic displays by defining areas within Fragments where Users can drag and drop other Fragments and widgets.

Follow these steps to define a drop zone:

  1. Go to Site AdministrationDesignFragments.

  2. Under Fragment Sets, select the Set with the Fragment you want to edit.

  3. Click the Fragment’s Actions (Action) button and select Edit to open the Fragments Editor.

  4. In the HTML code area, add the <lfr-drop-zone></lfr-drop-zone> label to define a drop zone within a Fragment.

    Important

    Drop zones cannot be added to editable elements within a fragment.

The following code excerpt shows how to use this label to define drop zones within a Tabs Fragment:

   <div class="tab-panel">
      [#list 0..configuration.numberOfTabs-1 as i]
      <div aria-labelledby="tab${i+1}" class="tab-panel-item d-none" data-fragment-namespace="${fragmentEntryLinkNamespace}" id="tabPanel${i+1}" role="tabpanel" tabindex="0">
         <lfr-drop-zone></lfr-drop-zone>
      </div>
      [/#list]
   </div>

This image shows the result in the Content Page editor sidebar:

The Tab Fragment shows four different drop zones in the Content Page editor.

Once defined, you can drag and drop any Fragment or widget into the drop zone.

Tip

Drop zones do not have an ID. They are rendered in the order they are specified, and they cannot be moved manually. However, you can configure the order of other elements in the Fragment.

Additional Information