Layout

Layout settings in the right-side panel deal with a block's dimensions, spacing, position, and visibility.

See Interior settings for arranging child blocks.

If you're unfamiliar with how to make layouts responsive to any screen size, check out this summary.

Adding & Removing Layout Settings

All Layout settings are optional, allowing for an uncluttered interface.

To add a setting, press ➕ next to "Layout", and select the desired settings from the menu.

To remove a setting, right click on its label in the panel, and select Remove.

Adding and removing layout settings.

The Layout Settings

• Width & Height—sets the dimensions of the block. If left blank, it will auto size. Dimensions can be applied in the following ways:

  • Fix (pixels)—fixes the size.

  • % (percentage)—sizes proportionally to the page or parent block's size.

  • Fit —sizes to fit its own content (like text or media), or to fit its child blocks (for container blocks).

  • Calc—calculates size using addition (+), subtraction (-), multiplication (*), and division (/), and round brackets for order of operations. A space is required around all operator symbols for the calculation to work. Calculations are mainly useful if you want to:

    • Use an exotic unit type (i.e. "50vh").

    • Include the block's Margin in the size (i.e. "50% - 40px" where 40px is the total margin).

    • Make the block fill the screen while accounting for sibling blocks with fixed sizes (i.e. "100% - 500px", where 500px is the size of the other block(s)).

Width/Height Tips:

• Block handles on the canvas can also be used to set Width & Height. Fit or Calc will get reset to Fix.

• Width or height not visually applying occurs if forced by circumstance, such as sibling blocks using up more than 100% of available space. Set hard limits with Min & Max dimensions.

• A red error outline will appear if the Width or Height can't take effect. This occurs if an unaccepted unit is entered. (i.e “30cm”).

• Suffixes can be written into the inputs to quickly switch metrics, like replacing "200px" by typing "50%".

• Max Width/Height—sets the maximum size a block can grow to. It will outline in red it uses an unacceptable unit since it cannot take effect.

• Min Width/Height—sets the minimum size a block can grow to.

• Padding—is highlighted on the canvas and sets spacing inside the block for content like text or children. It can be set for all sides or specific sides.

• Margin—is highlighted on the canvas and sets spacing outside the block's width & height. It can be set for all sides or specific sides.

• Self Align—aligns the block if placed directly on the canvas (left, center, right).

• Visibility—sets whether the block is:

  • Visible

  • Invisible—the block becomes empty and transparent.

  • Remove—the block is removed entirely. This can also be toggled from layers in the List Panel.

Position/Alignment Tips:

• By default, blocks have no alignment set and will align to the top left of their space (except for row and column blocks which align to the top center), or follow the alignment settings provided by a parent block.

• A child block's alignment settings will override its parent's settings.

• If a block is filling the width or height of the page or its parent block, alignment along that width or height will have no visual effect, since it has nowhere to move to.

• If a block is sitting directly on the page, Vertical Alignment options are not available because blocks are automatically added from the top down.