How can we help?

Multicomponent: Layout panel

The Layout panel allows you to control properties for each cell in a Layout Grid.

For example, by clicking a cell in a Layout Grid, you can use the Layout panel located at the bottom of the screen, to make the following design changes.

  • Span a cell across multiple columns or rows.
  • Specify cell width as a percentage of the width of the Klip, or by specifying the number of pixels.
  • Specify cell height in pixels.
  • Vertically align cell content.
  • Change padding - the space around a component when added to the cell.

The Layout panel is also available beside the Properties panel at the bottom of the screen after you have selected a component in a cell within the Layout Grid.

Spanning across rows and columns

Take in account the following points when using spanning across rows and columns.

  • Cells that are spanned, lose their custom width or height, and instead take on the widths and heights of the cells that are being spanned.
  • Select the left-most cell that you want to include when spanning horizontally. By doing this, it will merge that cell with other cells to the right.
  • Select the upper-most cell that you want to include when spanning vertically. By doing this, it will merge that cell with other cells below.
  • If you want to span across cells that have already been included in a span, you will need to remove the original spanning. For example, where you have three cells in a row and you have set spanning on cells two and three.  If you want to also include cell one, you will need to separate the original span, and then select cells one and span across cells two and three.

Learn more:

Now that you know more about the Layout panel, check out the following tutorial:

Important concepts

These articles provide an overview of important concepts for building Klips with multiple components:

 
Updated
Have more questions? Submit a request