Get started with XM Cloud Components

This topic provides an overview of the steps you take when creating a component with XM Cloud Components. For many of the steps, we provide a link to more detailed documentation. This guide is intended to be a starting point for understanding the component creation flow, and you can read more in the linked documentation.

Note

Instead of starting a component from scratch, it is also possible to import a copy of shared components that can be used as starting point to create your own.

To build a component from scratch:

  1. On the XM Cloud homepage, in the navigation header, click Design library > Components.

  2. In XM Cloud Components, on the Components tab, click Add component.

  3. In the Creating new component dialog, enter a name for the component and choose the Collection the component belongs to. Click Save.

  4. Click the component to start editing.

  5. The empty component canvas is a section that contains a grid. To start working on the layout of the component, click and drag on the grid to draw one or more containers. You can move these containers by dragging them on the grid, and you can change their size at any time.

  6. Click a container to open the corresponding context bar. In the context bar, you can see that the container is automatically assigned the type Block. To change the type of each container, click the arrow near the Block name, and choose another block element, such as Card, Image, Block quote, Component, or HTML block.

  7. In the container, you can now click Add element to add another Block element, or a Text element, an Inline element inside a container. You can also wrap another component in your component. Learn more about the various types of elements here.

  8. You can then add static or dynamic content to your elements, as well as configure and style the element.

  9. Optionally, to create a responsive component, add as many versions for different device types by clicking Add version or Duplicate version as many times as needed. You can use the breakpoint settings tool to specify device types to be used for each version.

  10. When your component is ready, you can stage it to be used in XM Cloud Pages, and publish it to be available publicly on your website. You can also get the embedding code of the component (including all its versions in case of responsive components) so you can use it in other page builders than XM Cloud.

Do you have some feedback for us?

If you have suggestions for improving this article,