Skip to main content
Version: 11.x

Screen layout components

Learn how to work with the default layout components, including how to add them to a screen layout, replace existing components, and customize them to fit your needs.

alt text

Default layout components​

Default layout components are available in the Marketplace and can be added directly to your site.

  • To get started, open the Media Library and navigate to the Screen layout components folder.
  • Click Get more screen layout components to open the Marketplace. alt text
  • Browse the available components and press get now to download the one you need. alt text
  • If the component requires a data source connection, you can connect it immediately or skip and configure it later. alt text
  • Once downloaded, your new components will appear in the Screen layout components folder. alt text

Add component to layout​

Once you have downloaded components to your site, you can apply them to a screen layout.

Default components are designed to fit the component areas in the default screen layouts.
If you are using a custom screen layout, you will need to create custom components to match the design.

  • To replace a component in a layout, open the Screen layouts folder and select the layout you want to edit.
  • Click the layout to open details. alt text
  • In the layout details, remove the component you want to replace. alt text
  • Click Select to browse for a new component, then choose the one you want to add. alt text alt text
  • When you’re done, save the layout to apply the changes. alt text
Important

Note that if the screen layout is already applied to your screens, any changes to the components will show immediately when you save your changes.

To avoid affecting live screens while working, make a copy of the component first and apply it only when your edits are complete.

Customize layout components​

If you want to adjust the design of your components, you can use the Template Creator tool. This allows you to customize elements such as colors, fonts, and layouts so the components better match your screen design and brand identity.

  • To customize a component, open its details and select Advanced editing. alt text
  • This gives you access to the full Template Creator tool, where you can make any necessary changes.
    You can learn more in the Template Creator Guide. alt text
  • Click on any item in the component to adjust settings such as font, color, or other design options. alt text
  • When you are finished, press Save to apply your changes. alt text