Work with a component layout

To create the layout of a component, you need to place elements on the component's canvas, usually grouped in blocks previously drawn on a grid.

When you create a new component, the canvas is made of a single section. Sections contain the grid system on which you can draw containers, also called blocks. You use the grid to add blocks of different sizes, as well as move these blocks to the appropriate location in the component section. You can also add elements to the component, either directly on the component canvas, or within a preexisting block. The placement and size of the various blocks and elements on the component canvas define the layout of the component.

Choosing to wrap elements within a block rather than place them directly on the canvas depends on the expected design of your component. For a simple component, you can add elements directly to the canvas, but this can also mean that you ultimately will have less control on the component's final look. This is because the content of these elements can vary in size, and therefore influence the final size of the element and its placement among the other elements in the canvas.

So, for more complex designs, or for dynamic components using data sources for multiple elements such as headline, description, button, we recommend that you wrap the elements in one or more containers. This helps you keep the design as expected, even when the content changes. For example, when a description varies in length, using containers ensures that the button remains below the headline regardless of the size of the description.

This topic explains how to draw blocks and add elements on the component's grid system.

Note

Creating a component layout is a very flexible process. After you have added blocks and elements on the grid, you can always move them in the grid by dragging them where you want them to be. You can also change the size of each element by dragging its corners.

It is possible to configure the grid differently at any point in the design process.

Draw a block

We recommend that you start your layout by adding block elements on the grid. This can be done by drawing a block on the section's grid, or by clicking Add element located in the Section context bar.

To add a block element to the grid:

  1. In the XM Cloud Components library, click a component thumbnail to open the component and its versions in the Components builder.

  2. Click on the canvas to select the Section so you can visualize the grid system where you want to place a block.

  3. To place a block on the canvas:

    • On the canvas of a component, click and drag the grid system to draw the area where you want to place your container. This container is automatically assigned to be Block, but you can change it to another type of block element such as Card, Image, or HTML Block, for example.

    • In the Section context bar, click Add element, and choose an element from the Block elements list. Then click and drag onto the grid to draw the area where you want the element to be.

    • In the Section context bar, click Add element, and choose an element from the Block elements list. In the location toolbar that appears after you have selected an element, click Append inside Section to place the block on the grid.

  4. Optionally, use the options in the right-hand pane to style or change the layout and alignment of the container.

You can now work further on the layout by adding more block elements, moving them around, changing their size, or even by adding sections. When you have more than one section, you can also configure each grid independently to add or remove rows or columns, for example. You can learn more about the different elements here, and how to add and configure grids here.

Add an element

To further define the layout of your component, you can add elements to the component, either in a previously drawn block or directly onto the grid of a section.

To add an element to a block:

  1. In the XM Cloud Components library, click a component thumbnail to open the component and its versions in the Components builder.

  2. Click on the canvas of the component (on the grid itself or in a container already drawn on the grid) to open the context bar. Then click Add element to open a drop-down menu of all the elements available. They are listed under Block, Text, and Inline elements.

    Screenshot showing the list of elements to be added

  3. Click the element you want to add, for example, Card.

The element is now added on the canvas. You can reposition it in the canvas or in the block, as well as configure and style it using the options available in the right-hand pane.

Move an element in the canvas

After you have added blocks and elements on the grid, as well as elements nested in the previously drawn blocks, you can always move all the elements around to improve the component layout.

There are two ways to move an element in the canvas:

  • If the element is directly located on the grid, click the element to open the context bar, then click Reposition element . Move and drop the element somewhere else on the grid.

    Screenshot of a block being repositioned

  • If the element is located in a block, click the element to open the context bar, then click Reposition element . You can then move the element by clicking the desired destination in the initial block, or in another block of the same component, or another block of another version of the component.

    A destination panel opens if other elements exist within 50 pixels of the drop location. The destination panel lets you pick where to add the new element respective to the other elements located nearby.

    The icon indicates that the element is added as a variable nested within the paragraph, as opposed to placed independently before or after the paragraph.

    Screenshot of an element being repositioned in a block using a destination panel

Move an element forward or backward

When two elements overlap on the grid, you can decide which element you want to be in the background, and which element you want to be in the foreground.

To move an element backward or forward:

  1. In the XM Cloud Components builder, click the element you want to move forward or backward.

  2. On the context bar of the element, click Bring forward or Bring backward . These icons are only available when two elements overlap on the grid.

Do you have some feedback for us?

If you have suggestions for improving this article,