Skip to main content

Layout

Before you start

Layout configuration is one of the most frequently used function. Once you get familiar with the layout, you will feel more comfortable while using the Web Slider.

Overview​

When creating an animation, we'll want to set position and size of objects such as images, videos, etc. To do this we use Layout. There are different types of Layouts and each type has a different configuration. Some of the Layouts have per-device configuration, which means you can quickly set different object position and size for different devices (css breakpoints).

Layout can be applied to an object and a layer:

  • Object - Object is positioned relative to page if the parent layer has no Layout, otherwise its positioned relative to the Layer.
  • Layer - By default a Layer has no layout and is just a container for objects. When Layout is set, objects are positioned relative to the Layer.
Pixels and Percentage

Most configuration inputs have numeric inputs with units. We can set the position or size in pixels or percentage.

Layouts​

Lets describe one by one.

Absolute layout​

Absolute layout position and size element in pixels or percentage relative to Page, Stage or Guidebox.

Absolute layout has the following properties:

  • Relative to Page, Stage or Guidebox
  • Position - X and Y.
  • Size - Width and Height.

Position and size can be set per device.

Fit layout​

Fit layout fits element to Page, Stage or Guidebox.

Fit layout has the following properties:

  • Relative to
    • Fit Page fits element to Page boundaries.
    • Fit Stage fits element to Stage boundaries.
    • Fit Guidebox fits element to Guidebox boundaries.

Fit layout can be set per device.

Snap layout​

Snap layout snaps an element to the edge of a Page, Stage or Guidebox.

Snap layout has the following properties:

  • Relative to Page, Stage or Guidebox.
  • Snap to edge or edges: Center, Left, Right, Top, Bottom, Top-Left, Top-Right, Bottom-Left, Bottom-Right.
  • W - Width.
  • H - Height.
  • Offset between the element and the "Relative to" boundaries (Page, Stage or Guidebox)

Grid layout​

Grid layout fits Object in a grid.

info

Default grid configuration is 24x24 cells.Grid configuration can be changed in the Project Settings panel.

Grid layout has the following properties:

  • Left snap left edge of Object to this cell.
  • Width snap right edge of Object to this cell.
  • Top snap top edge of Object to this cell.
  • Height snap bottom edge of Object to this cell.

Inset layout​

Fit layout fits element to Page, Stage or Guidebox with offset

Inset layout has the following properties:

  • Left - offset from left edge.
  • Right - offset from right edge.
  • Top - offset from top edge.
  • Bottom - offset from bottom edge.