Elements Overview

Elements are the content inside blocks. They share most of their controls, so once you know the common settings groups, every element type feels familiar.

#Element Types

To add an element, select a block - a toolbar appears with an add button per type. Text and image also have shortcuts: T and I.

#Shared Settings Groups

• "Position & Transform" - alignment buttons (snap to the block's edges and centers), X/Y position in pixels, Scale, Rotate, and the transform origin. Position, scale, rotation, and opacity are per-pane values: they can differ on every pane the block appears on, and PaneFlow animates the difference - see Transitions & Morphing.
• "Layout & Size" - the sizing mode and dimensions (next section), plus "Horizontal Padding" and "Vertical Padding".
• "Animation" - an entrance or looping animation. See Element Animations.
• "Fill & Border" - background color, border color and width, corner radius.
• "Visual Effects" - "Opacity", "Parallax" (transition depth, 0-10), "Blur", "Background Blur" (frosted-glass behind the element), "Shadow", and "Inner Shadow". Note that "Shadow" is a box shadow on the element's rectangle - there is no per-letter text shadow.
• "Mask" - clip the element to a shape, with "Mask Size" controlling how large the mask renders.
• "On Click Action" - "Open URL", "Go To Pane", "Next Pane", "Previous Pane", "Download File", or "Call Global Function". An element's own action wins over its block's action.
• "CSS Class" - a custom class for styling in exported code.

#How Sizing Works

Every element is sized in one of two modes, switched at the top of "Layout & Size":

• "Relative (%)" - width and height are percentages of the block. A 50%-wide image stays half the block, whatever size that block is.
• "Fixed (px)" - absolute pixel dimensions on the design canvas.

Height also offers "Auto": images and videos follow their natural aspect ratio at the chosen width, text follows its content. Auto is the right default for most media - set the width and stop thinking about it.

The mode matters most when a block is reused across panes at different sizes. Relative elements rescale with the block automatically. Fixed elements keep their pixel size - to fit one into a smaller placement, adjust its Scale on that pane (Scale is per-pane, so the change animates). Per-pane width and height exist only for text and custom code; every other element has one size everywhere and resizes per pane through Scale.

#Selecting, Arranging, Grouping

• Multi-select with + click, then move or align everything at once.
• Copy / paste with CTRLC / CTRLV - pasting into a selected block clones elements there.
• Group a selection with CTRLG (the same shortcut ungroups a selected group). Groups lay their children out as a row or column with "Content Gap" and "Content Position" controls, and can be styled and animated as one unit.
• Stacking order - "Bring Forward" CTRL] and "Send Backward" CTRL[, or drag in the layers list.
• Align to block - ALTA / ALTH / ALTD for left/center/right, ALTW / ALTV / ALTS for top/middle/bottom.
• Rename an element by double-clicking it in the layers list - named layers keep complex panes navigable.

#Reusing Styles

Right-click any element to "Copy Styles" (CTRLC) and paste them onto another element of the same type (CTRLV). "Set As Default Styles" makes the current look the default for every new element of that type in this project - style one caption, set it as default, and every new text element starts there.

#Next

• Text - the most-used element, in detail
• Images & Video - media fitting and placement
• Element Animations - bringing elements to life