Skip to main content

Universal Block Settings

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

Color scheme​

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

  • Inherit color scheme: 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 scheme color (Primary, Secondary, Tertiary, Background, Button background, Button background inverse, Layer, Error, or Warning), Transparent, or Custom.
  • Background color opacity: Fade the chosen scheme color.
  • Custom background color: A color picker, 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.

On the Currency selector and Language selector blocks this group is called Appearance Modal and styles the dropdown panel, with an extra Placement option (Top center or Bottom center).

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 when Width is Custom.
  • Alignment: Align the content left, center, or right.

Container and media blocks (Group, Layout item, Image, Menu, and the selector blocks) 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.

The Logo block and the Image child of Text with image use a simpler Size group with width and height sliders per device.

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 from -50 to 50 px. Negative values pull a block closer to its neighbors. Available on Text, Reveal Heading, Text with image, Link, and the Image child of Text with image.

Blocks also pick up the Gap setting of their parent Group or Layout, so you usually only need padding or margin when a single block should sit differently from its siblings.

Borders​

Container blocks include borders in their Appearance group; the Image block and the Image child of Text with image have a dedicated Borders group:

  • 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.

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. Font is Body, Heading, Sub heading, or Accent.
  • 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, Reveal Heading, Breadcrumb, Text with image, and Link).

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.

The Reveal Heading block uses its own word-by-word reveal animation instead; see Basic Blocks.

Visibility​

  • Hide on mobile: Available on text-type blocks (Text, Reveal Heading, Text with image, Link) and container blocks (Group, Layout item, Menu); 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 (Text, Text with image) and the selector blocks provide a Hover group:

  • Hover type: None, Color, Opacity, Underline in, or Underline out.
  • Color, Color opacity, and Custom color: The hover text color.
  • 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: None, 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. Padding and animation, however, are available on most blocks. Each block page lists the settings that are specific to that block.