Configuring Components in Design Mode

You are reading the AEM 6.3 version of Configuring Components in Design Mode.
This documentation is also available for the following versions:  AEM 6.2  AEM 6.1  AEM 6.0  AEM 5.6.1  AEM 5.6  CQ 5.5  CQ 5.4 

When AEM instance is installed out-of-the-box, a selection of components are immediately available in the components browser.

In addition to these, various other components are also available. You can use Design mode to enable/disable such components. When enabled and located on your page you can then use Design mode to configure aspects of the component design by editing the attribute parameters. 

Note

Care must be taken when editing these components. The design settings are often an integral part of the design of the entire website, so they should only be changed by someone with the appropriate privileges and experience, often an administrator or a developer. See Developing Components for more information.

Note

Design mode is only available for static templates. Templates that are created with editable templates should be edited using the template editor.

This actually involves adding or removing the components allowed in the paragraph system for the page. The paragraph system (parsys) is a compound component that contains all other paragraph components. The paragraph system allows authors to add components of different types to a page as it contains all other paragraph components. Each paragraph type is represented as a component.

For example, the content of a product page may contain a paragraph system holding the following:

  • An image of the product (in the form of an image or textimage paragraph)
  • The product description (as a text paragraph)
  • A table with technical data (as a table paragraph)
  • A form users fill out (as a forms begin, forms element, and forms end paragraph)

Note

See Developing Components and Guidelines for Using Templates and Components for more information about parsys.

Enable/Disable Components

To either enable or disable a component:

  1. Select the Design mode.

    file
  2. Tap or click on a component. The component will have a blue border when selected.

    file
  3. Click or tap the Parent icon.

    file

    This will select the paragraph system containing the current component.

  4. The Configure icon for the paragraph system will be shown in the parent's action bar.

    file

    Select this to show the dialog.

  5. Use the dialog to define the components available in the components browser when editing the current page.

    file

    The dialogue has two tabs:

    • Allowed Components
    • Settings

    Allowed Components

    On the Allowed Components tab, you define which components are available for the parsys.

    • The components are grouped by their component groups, which can be expanded and collapsed.
    • An entire group can be selected, by checking the group name and all can be deselected by unchecking.
    • A minus represents at least one but not all items in a group are selected.
    • A search is available to filter for a component by name.
    • The counts listed to the right of the component group name represent the total number of selected components in those groups regardless of the filter.

    You define the configuration per page component. If child pages use the same template and/or page component (usually aligned), then the same configuration will be applied to the corresponding paragraph system.

    Note

    Adaptive form components are designed to work inside Adaptive Form Container to leverage the Forms ecosystem. Therefore, these components must be used only in adaptive form editor and they will not function in the Sites page editor.

    Settings

    On the Settings tab you can define additional options such as to draw an anchor for each component and to define the cell padding of each container.

  6. Select Done to save your configuration.

Configuring the Design of a Component

  1. Select the Design mode.

    file
  2. Tap or click on a component with a blue border. In this example an image component is selected.

    file
  3. Use the Configure icon to open the dialogue.

    file

    In the design dialogue, you can configure the component according to the design parameters avalable.

    file

    The dialogue has two tabs:

    • Properties
    • Features

    Properties

    The Properties tab allows you to configure the important design parameters of the component. For example for an image component you can define the maximum and minimum size of the image allowed.

    Features

    The Features tab allows you to enable or disable additional features of the component. For example, for an image component you can define the orientation of the image, the cropping options available, and if an image can be uploaded.

    file

    Use the Add button to add additional entries to a multiple-entry dialogue list.

    file

    Use the Delete icon to remove an entry from a multiple-entry dialogue list.

    file

    Use the Move icon to rearrange the order of entries in a multiple-entry dialogue list.

    file
  4. Click or tap the Done icon to save and close the dialogue.

Any questions?

Have a question about this or any other AEM topic? Ask our Community.
Learn more about AEM topics on our help hub.
Was this helpful?

By submitting your feedback, you accept the Adobe Terms of Use.

Thank you for submitting your feedback.