Use Layout mode to resize components

Last update: May 2, 2024

CREATED FOR:

  • User
  • Developer

The Interactive Communication Web channel authoring interface enables you to resize components using the Layout mode. Drag-and-drop blue dots within columns to define the start and end points to position components. The blue dots display after tapping the component within the responsive grid. The responsive grid consists of 12 equal columns. The white and blue color shading in alternate columns differentiates one column from the other.

You can use the Layout mode to resize components for all device types such as desktop, tablet, phone, and other smaller devices. The tablet automatically derives the layout configuration from the desktop version and the smaller devices derive layout configuration from phone. However, you can override the automatically derived configurations to define a different configuration for each device type.

NOTE
If you are creating the Web channel using Print channel as master for an Interactive Communication, the components available for resizing also include the sub-forms and fields that are auto-generated in Web channel using Print channel. The Web channel retains the layout for the Print channel elements in Layout mode.

Access Layout mode

Select Layout from the drop-down list that appears at the top of the Interactive Communication authoring interface next to the Preview option. The form displays in the Layout mode.

  1. Log in to the AEM author instance and navigate to Adobe Experience Manager > Forms > Forms & Documents.

  2. Create an Interactive Communication or open an existing one.

  3. Select Layout from the drop-down list that appears at the top next to the Preview option. The form displays in the Layout mode.

    Layout mode for Interactive Communications

Resize components

  1. In Layout mode, select the component to resize. The blue dots display at the start and end of the responsive grid.

  2. Drag-and drop the blue dots to define the position of the component in the responsive grid.

    Resizing using Layout mode

    The toolbar that displays after tapping components consists of the following options:

    • Parent: Select the parent of a component.
    • Float to new line: Shift the component to the next line if there are multiple components within the same line.

    You can undo all resizing changes and apply default layout to the panel containing resized components using the Revert breakpoint layout ( Revert Breakpoint ) option. Select the parent of the resized component to view the option.

    NOTE
    You cannot resize table column, toolbar, toolbar button, and target area components using the Layout mode. Use Style mode to resize these components.

Example

Objective: You want to insert a table component and an Image component and position them parallel to each other in an Interactive Communication.

  1. Insert the table and image components using Edit mode in the Web channel of an Interactive Communication. The image component display after the table component.

  2. Switch to Layout mode and select the Table component. The blue dots to resize the component display at column 1 and 12.

  3. Drag-and-drop the blue dot at column 12 to column 6 of the responsive grid.

    Define the end point of the table

  4. Similarly, select the Image component and drag-and-drop the blue dot at column 1 to column 7 of the responsive grid. The table and image components display parallel to each other.

    Table and the image in parallel in Layout mode

    You can select the Image component and select the Float to new line option available in the toolbar to shift the Image component to the next line.

Resize panels

Execute the following steps if you want to resize the entire panel instead of individual components:

  1. Select any of the components in the panel that you want to resize, select Select Parent , and select the first option in the drop-down list, if the panel is the immediate parent of the component.

    The blue dots display at the start and end of the responsive grid.

  2. Drag-and drop the blue dots to define the position of the panel in the responsive grid.
    You can repeat steps 1 and 2 and select Select Parent to shift the resized panel to the next line.