Working With Blocks

Blocks are the containers that give a pane its layout. They snap to the pane grid, can span any number of cells, and never overlap. All content lives inside blocks.

#Creating Blocks

• Click the "+" that appears in any empty grid cell to create a 1x1 block there.
• Drag across several empty cells to draw a block spanning them in one motion.
• Drop a file - drag an image or video file onto an empty cell and PaneFlow creates a block with that media already inside. Dropping a data file (CSV, Excel, Numbers, Google Sheets) opens the chart editor instead.

#Moving and Resizing

Drag a block to move it between cells; drag its edges to extend or shrink the cells it spans. Need positions the grid does not offer? Increase the pane's grid resolution - see Working With Panes.

To delete a block, select it and press .

#Reusing a Block Across Panes

This is the heart of PaneFlow transitions. Select a block and press CTRLC ("Copy Block Reference"), then right-click an empty cell on another pane and choose "Paste Block Reference". The same block now lives on both panes - same content, independent grid placement - and PaneFlow animates between the two placements during navigation.

Transitions & Morphing covers what you can do with this in depth.

#Block Settings

With a block selected, the settings sidebar shows:

• "Enter & Exit" - how the block arrives and leaves when it exists on only one pane. "Enter From" and "Exit To" each offer a direction (eight sides and corners, or "Center" to scale in place) or "Fade". Blocks shared across panes morph between placements instead, and these settings do not apply.
• "Fill & Border" - background color (solid or gradient), border, and the block's corner radius. The radius normally inherits from the project or pane; click the lock to override it for this one block, letting a single tile stand out.
• "On Click Action" - make the whole block a click target: "Open URL", "Go To Pane", "Next Pane", "Previous Pane", "Download File", or "Call Global Function". Prefer this over per-element actions for clickable cards and tiles. See Interactive Slideshows.
• "CSS Class" - a custom class for extra styling in exported code.

#Block Styles as Defaults

Right-click a block to "Copy Block Styles" (CTRLC) and paste them onto another block (CTRLV). "Set As Default Block Styles" makes the current look the starting point for every new block in this project.

#Next

• Elements Overview - what goes inside blocks
• Interactive Slideshows - make blocks clickable
• Transitions & Morphing - block reuse in action
• Working With Panes - the grid blocks snap to