A section is a node that contains several other child nodes and will decide how they are arranged in relation to each other. The order of the child nodes in the tree on the left of the screen corresponds to the order in which they are displayed on the screen.

You can create an infinite number of section nodes within a section, allowing you to create the layout and distribution of the different nodes as you wish on the screen.

Direction

Selects whether the sections will be horizontal or vertical.

Align

You can align the section to the right, left or center edge.

Split

You can choose whether the sections will be distributed on the top, bottom or middle edge.

Spacing

Allows you to choose the spacing between sections.

Off

You can enable or disable the sections.

Style

The style manages the general visual properties applied to this node.

Background

Control the background (image, color, or gradient) of the node.

Opacity

Control the opacity of the node.

Rounding

Controls the radius of the rounded outer corners of the node. You can set the radius for all corners (top left, top right, bottom left, bottom right) or for each corner individually.

Border

Controls the shape, color and thickness of the node's border.

Thickness**: The thickness of the border. You can set the thickness for all borders (top, left, right, bottom) or for each one individually.
Shape** : the style of the border.
Color** : the color of the border.

Shadows

Allows you to add one or more shadows to a node. Each shadow is defined by :

type** : whether the shadow is inside or outside the node box.
x:** specifies the horizontal distance. Negative values place the shadow to the left of the element.
y** : specifies the vertical distance. Negative values place the shadow above the element.
blur** : the larger this value, the more blurred the shadow becomes, so it is larger and lighter.
Dispersion**: positive values make the shadow expand and grow, negative values make the shadow shrink.

Blur

Applies blur to the background of the node only, to create an iOS-style glass effect. The larger the value, the greater the blur.

Layout

The layout allows you to place and position your node in relation to its siblings (those of the same parent node).

Width

Controls the width of the node.

px** : defines the width of the node in pixels.
%** : sets the width of the node as a percentage of the width of its parent.
fit**: automatically adjusts the width of the node according to the width of its content.
grow** : specifies how much of the parent's remaining space should be allocated to the node.

Height

px** : defines the height of the node in pixels.
% : defines the height of the node as a percentage of the width of its parent.
fit** : automatically determines the height of the node according to the width of its content.
grow** : specifies how much of the parent's remaining space should be allocated to the node.

Top

Controls the top margin between the node and its neighbor.

px** : defines the margin in pixels.
%** : sets the margin in percentage of its parent's width.
auto** : automatically sets the margin to the remaining space in its parent. If there are several nodes with the upper margin set to auto, the remaining space is divided equally between each node.

Right

Controls the right margin between the node and its neighbor.

px** : defines the margin in pixels.
%** : sets the margin as a percentage of its parent's width.
auto** : automatically sets the margin to the remaining space in its parent. If there are more nodes whose top margin is set to auto, the remaining space is divided equally between each node.

Down

Controls the bottom margin between the node and its neighbor.

px** : sets the margin in pixels.
%** : sets the margin in percentage of its parent's width.
auto** : automatically sets the margin to the remaining space in its parent. If there are more nodes with a margin greater than auto, the remaining space is divided equally between each node.

Left

Controls the left margin between the node and its neighbor.

px** : sets the margin in pixels.
%** : sets the margin as a percentage of its parent's width.
auto** : automatically sets the margin to the remaining space in its parent. If there are more nodes with a higher margin set to auto, the remaining space is divided equally between each node.

Shrinkage

Shrinkage factor of the node's children. If set to 0, the node cannot shrink.

Components

Section