Ask AI
Skip to main content

Positioning/Sizing elements

Elements can be positioned/sized by either dragging & dropping it into place or by adjusting the positioning/sizing values which are found in the element details underneath the “style” tab.

Elements can be positioned on a template or within a container element by using several “units”:

Positioning elements​

You can position elements by defining their x and y values. For each of those values you can choose between a couple of “units” allowing you to position the elements exactly according to your needs:

  • Grid: See Grid layout
  • Px: Position your element x or y according to the amount of pixels distance from respectively the left and top side of the parent (This can be switched by switching position to align-right and/or switching position to align-bottom.
  • %: Position your element x or y according to the amount of % distance from respectively the left and top side of the parent (This can be switched by switching position to align-right and/or switching position to align-bottom.
  • VP: Position your element x or y according to the amount of viewport % distance from respectively the left (viewwidth) and top (viewheight) side of the parent (This can be switched by switching position to align-right and/or switching position to align-bottom.

You can also choose to align items:

  • Left: X will start from the left of the parent container, so X = 0 will be the leftmost position.
  • Right: X will start from the right of the parent container, so X = 0 will be the rightmost position.
  • Top: Y will start from the top of the parent container, so Y = 0 will be the leftmost position.
  • Bottom: Y will start from the bottom of the parent container, so Y = 0 will be the rightmost position.

Sizing elements​

Elements have several different settings that can be used to “size” them:

  • Width: The width of this element
  • Height: The height of this element
  • Minimum Width: The width of this element will never be smaller than this value. This is handy when your Width unit is a relative unit such as “grid” “%” “vp”, etc…
  • Minimum Height: The height of this element will never be smaller than this value. This is handy when your Height unit is a relative unit such as “grid” “%” “vp”, etc…
  • Maximum Width: The width of this element will never be bigger than this value. This is handy when your Width unit is a relative unit such as “grid” “%” “vp”, etc…
  • Maximum Height : The height of this element will never be bigger than this value. This is handy when your height unit is a relative unit such as “grid” “%” “vp”, etc…

Z position​

Z position indicates the level of elevation relevant to other elements. For example an element A with z-index smaller than a z-index of an element B can overlap element B when they overlap eachother with regards to x/y position & width/height values.

Fixed position​

If set to true this elements position will be fixed while scrolling meaning this element will move along with the scrolling of the user.

Hiding elements​

This will hide an element on a certain screensize;