Configure the layout of your tile group

In this topic, you learn how to configure the layout of your tile group, including the header content, the tile group appearance, and tile appearance.

Prerequisites

Procedure

  1. To make layout changes to the header image, open the Header Image tab.

    1. In the sections Desktop Header Image, Tablet Header Image, and Mobile Header Image, you can specify the layout of the header content in the tile group depending on the output medium. In Header Height, enter a header height in pixels.

    2. In Light Appearance Header Image, select a header image for a light appearance from the Media Library.

    3. By default on desktop, dark appearance header images are inherited from the header image selected in Light Appearance Header Image. Select Do NOT inherit light appearance header image to select a dark appearance header image from the Media Library separately. For tablet and mobile, select a separate dark appearance header image from the Media Library.

  2. To make layout changes to the tile group appearance, open the Tile Group Layout tab.

    1. In Tile Group Layouts for Light Appearance, select Add Tile Group Layout to add one or more predefined tile group layout settings from the Tile Group Layout tool to apply to your tile group for a light appearance. If same tile layout settings are shared between multiple tile group layouts, the top tile group layout is prioritized when applying settings.

    2. By default, tile group layouts added for light appearance are also used for dark appearance. In Tile Group Layouts for Dark Appearance, select Do Not Inherit Light Appearance Tile Group Layout to prevent the inheritance of light appearance for tile group layouts for dark appearance and to add tile group layouts for dark appearance separately.

    3. Select Add Tile Group Layout to add one or more predefined tile layout settings from the Tile Group Layout tool to apply to your tile for a dark appearance. If the same tile group layout settings are shared between multiple tile group layouts, the top tile group layout is prioritized when applying settings.

    4. In the Tile Group Layout Settings section, enter the CSS style class in CSS Style Class and select Force Tile Layout Attributes! to enable the settings defined in the tile group layouts added to this tile group instead of the tile group inheriting tile group layout settings configured in launchpad layouts by default.

  3. To make layout changes to the tile layout in a tile group, open the Tile Layout tab.

    1. In Tile Layouts for Light Appearance, select Add Tile Layout to add one or more predefined tile layout settings from the Tile Layout tool to apply to your tile for a light appearance. If same tile layout settings are shared between multiple tile layouts, the top tile layout is prioritized when applying settings.

    2. By default, tile layouts added for light appearance are also used for dark appearance. In Tile Layouts for Dark Appearance, select Do Not Inherit Light Appearance Tile Layout to prevent the inheritance of light appearance for tile layouts for dark appearance and to add tile layouts for dark appearance separately.

    3. Select Add Tile Layout to add one or more predefined tile layout settings from the Tile Layout tool to apply to your tile for a dark appearance. If the same tile layout settings are shared between multiple tile layouts, the top tile layout is prioritized when applying settings.

    4. In the Settings for Tiles Displayed in this Tile Group section, select Clickable Tiles to make all selected tile clickable. Buttons previously displayed on tiles are hidden and the whole tile areas is clickable. You can access tile actions from the right-click context menu. Select Force Tile Layout Attributes! to enable the settings defined in the tile layouts added to the tile instead of the tile inheriting tile layout settings configured in launchpad layouts and tile group layouts by default.

    5. In the Tile Group Size Settings section, you can select the width and alignment of the content of the tile group size.

      Content Width

      Select between the following alignment options:

      • No selection Inherit (Adjust to Layout Shell Width)

      • Full Screen

      • XXXLarge

      • XXLarge

      • XLarge

      • Large

      • Medium

      • Small

      • XSmall

      Content Alignment

      Select between the following alignment options:

      • No selection Inherit (Left)

      • Start (default)

      • Center

      • End

  4. To create a multicolumn launchpad appearance, open the Multicolumn tab.

    1. In Navbar Groups, select Add Navbar Group to add one or more predefined tile groups to be rendered in a dedicated navbar area on the left side of the launchpad.

    2. In Sidebar Groups, select Add Sidebar Group to add one or more predefined tile groups to be rendered in a dedicated sidebar area on the right side of the launchpad.

    3. In the Multicolumn Setup section, you can select the width and fit for your navbar and sidebar. The fit can be configured to either shrink or wrap the navbar and sidebar on smaller screens.

Results

  • You have configured the layout of your tile group.

Next steps

Related topics