Skip to main content

Universal Block Settings

Most blocks in Lotio share a set of common settings that control their appearance, size, spacing, and behavior. These settings are rendered from the same shared snippets, so they look and behave the same way whether you are editing a Text block, an Image block, or a Group. Learn them once and you can style any block in the theme.

Color scheme​

Container-type blocks (Group, Layout item, Menu, Collapse, Icon, Social media, and the selector blocks) let you override the color scheme of the parent:

  • Inherit color scheme: Enabled by default. The block uses the colors of the section or block it sits in.
  • Color scheme: When inheritance is off, pick one of the color schemes defined in Theme settings > Colors.

Background​

Most container-type blocks provide an Appearance group with a background:

  • Background type: None, Color, or Gradient. The Icon and Carousel navigation blocks also accept Image.
  • Background color: Choose a color from the current scheme (Primary, Secondary, Tertiary, Background, Button background, Layer, Error, Warning, and so on), Transparent, or Custom.
  • Background color opacity: Fade the chosen scheme color from 5% to 100%.
  • Custom background color: A color picker with alpha, shown when the background color is set to Custom.
  • Background gradient: A gradient editor, shown when the type is Gradient.
  • Background blur: Apply a backdrop blur behind the block (0-50).
  • Background image desktop / mobile and Background overlay: When the type is Image, pick a separate image per device and add a color or gradient overlay with optional blur.

To paint a background behind a Section, Group, or Layout item without touching its own Appearance settings, add one of the Background blocks inside it instead.

Size & layout​

Text-type blocks (Text, Reveal Heading, Text with image, Link) provide a Layout group:

  • Width: Fit (the block takes only the space it needs), Fill (it expands to the available width), or Custom.
  • Custom width: The width in pixels when Width is Custom.
  • Alignment: Align the content left, center, or right.

Container and media blocks (Group, Layout item, Image, Menu, Logo, selectors) provide a Size group with per-device values:

  • Device: Switch between the desktop and mobile values. On mobile, keep Inherit desktop value enabled to reuse the desktop settings.
  • Desktop width / Mobile width: Fit or Fill.
  • Desktop height / Mobile height: Fit, Fill, or Custom, with Custom desktop height and Custom mobile height sliders.
  • Max width: Cap the block at a Custom max width in pixels.

Spacing​

Virtually every block provides device-specific padding, and text-type blocks add margin:

  • Padding: Choose the Device (Desktop or Mobile), then set Top, Bottom, Left, and Right padding from 0 to 100 px. On mobile, Inherit desktop value reuses the desktop padding until you turn it off.
  • Margin: The same device switch with Top and Bottom margins, used to space a block from its neighbors without enlarging its background.

Lotio pairs blocks with the Gap setting of the parent Group or Layout, so you usually only need padding or margin when a single block should sit differently from its siblings.

Borders​

  • Border: None, Solid, or Dashed.
  • Border width: Thickness from 0 to 10 px.
  • Border color: Current color, a scheme color, or Custom, with a Border opacity slider and a Custom border color picker.
  • Corner radius: None, Extra small, Small, Medium, Large, Extra large, 2X large, Pill, or Oval. The named sizes follow Theme settings > Corner radius.

Typography​

Text-carrying blocks (Text, Reveal Heading, Breadcrumb, Count to, Text with image, Link, Collapse header, Tab, Currency selector, Language selector) share a Typography group:

  • Preset: Default, Paragraph, Heading 1-6, or Custom. Presets are edited once in Theme settings > Typography.
  • Font, Size, Italic, Weight, Line height, Letter spacing, Case, Wrap: Shown only when the preset is Custom.
  • Color: Default, Inherit, a scheme color, Transparent, or Custom, with Color opacity and Custom color.
  • Line clamp: Limit the text to 1-5 visible lines (text blocks only).

Animation​

Most blocks provide an entrance animation that plays when the block scrolls into view:

  • Type: Global (use the preset from Theme settings > Animation), Custom, or None.
  • Effect: Fade, Fade up, Fade down, Fade left, Fade right, Zoom in, Zoom out, Rotate left up, Rotate right up, Snake up, Snake down, Snake left, Snake right, or 3d up. Shown when the type is Custom.
  • Duration: Animation length from 300 to 4000 ms. Shown when the type is Custom.

Visibility​

  • Hide on mobile: Available on text-type and container blocks; hides the block on small screens.
  • Show on: Available on Image, Logo, and the selector blocks; choose All, Desktop, or Mobile.

This lets you build a different experience per device, for example a compact Group for mobile and a richer one for desktop, each hidden on the other device.

Hover effects​

Two kinds of hover controls recur across blocks.

Text-type blocks and the selector blocks provide a Hover group:

  • Hover type: None, Color, Opacity, Underline in, or Underline out.
  • Color and Custom color: The hover text color, with its own opacity.
  • Underline size: Thickness of the animated underline.
  • Opacity: The hover opacity when the type is Opacity.

Container blocks (Group, Layout item, Menu) provide a Trigger on parent hover group:

  • Parent: Mark this block as the hover trigger for its children.
  • Hover type: In zoom, In up, In down, In left, In right, Out zoom, Out up, Out down, Out left, or Out right.
  • Children cascading: Stagger the effect across child blocks.
  • Enable fade, Duration, Delay, Strength: Fine-tune the motion.
  • Disable on mobile: Skip the hover effect on touch devices.
tip

Not every block has all of these settings. Small utility blocks such as Badge, Button, Spacer, and Custom liquid keep only their own controls. The padding, animation, and visibility controls, however, are available on nearly every block. Each block page lists the settings that are specific to that block.