Style

Style settings in the right-side panel configure the block's visual appearance.

Adding & Removing Style Settings

For blocks, all Style settings are optional, allowing for an uncluttered menu.

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

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

If the page is selected, Bg Colour is always shown and currently the only available setting.

Adding and removing style settings.

The Style Settings

• Bg Colour—the background colour.

• Bg Image—a background image that appears over the Bg Colour. Images can be added by file upload, link, or the royalty-free library.

  • Fit toggles whether the image will Cover the whole area, Contain to appear fully, or display in its Resolution.

  • Alignment lets you toggle where the image is pinned when it overflows or doesn't fill the space.

  • Repeat toggles whether an image that doesn't fill the whole background should tile.

• Radius—the roundness of the corners, which can be set together or individually in sizes like px and %.

• Borders—applies a border to all sides, with options for thickness (in pixels), line style, and colour.

• Top/Bottom/Left/Right Border—applies a border to the specific side. These take visual precedence over the Borders setting.

• Shadow—adds a shadow coming from the block's frame. Multiple shadows can be added, with the first one drawn on top. A shadow's settings are:

  • Colour—which typically has some transparency for a smoother look.

  • X/Y—the horizontal or vertical offset in pixels. Negative values place the shadow to the left or above the block.

  • Blur—the length of the shadow in pixels.

  • Spread—offsets where the shadow starts in relation to the frame, in pixels.

Shadows will be cutoff by the edges of a parent block, unless the parent has Overflow set to Visible.

• Opacity—set from 0-100%, with 0% making the block fully transparent.

• Cursor—sets what mouse cursor displays when hovering over the block (visible in previews and published websites & apps). The Auto option allows the browser or device to decide.