Skip to main content

Layout Blocks

Layout blocks are container blocks that organize and arrange other blocks. They are the backbone of Ronin's page-building system: instead of fixed section layouts, you nest containers inside one another to create columns, carousels, tabs, accordions, and menus without writing code. Ronin includes 5 layout blocks, plus the private child blocks they manage.

Nesting works the same way everywhere. A Layout item or Group can hold any theme block or app block, including another Layout or Group, so a two-column card grid is simply a Layout (2 columns) whose Layout items each contain a Group with an Image, Text, and Button. Tabs, Collapse, and Menu use their own child block types (Tab, Collapse row, Link), and Tab and Collapse row in turn accept regular theme blocks. Every container also shares the universal controls described in Block Settings.

Layout​

The Layout block arranges its Layout items in a grid, carousel, or masonry layout with per-device column counts.

block-layout.webp

Presets:

  • Layout: An empty layout with the default column count.
  • Layout: 2 columns: Two Layout items, each with a placeholder Text block.
  • Layout: 3 columns: Three Layout items, each with a placeholder Text block.
  • Layout: 4 columns: Four Layout items, each with a placeholder Text block.

Settings:

  • Type: Carousel, Grid, or Masonry.
  • Column: Number of columns on desktop and on mobile (switch the Device selector to edit each).
  • Gap: Use the global gap or a custom desktop and mobile gap.
  • Width: Fill the container or set a custom width.
  • Grid options: Fixed row with a custom auto-row height.
  • Carousel options: Items per move (desktop and mobile), navigation arrows, pagination, transition effect (slide, fade, nature, water, or urban, available when one item shows on both desktop and mobile), active index, speed, auto play with a custom interval, loop, overflow hidden (all, desktop, or mobile), and auto height.
  • Padding: Device-specific top, bottom, left, and right padding.
  • Child blocks: Layout item blocks (below).

Layout item​

The Layout item block is one cell of a Layout. It behaves like a Group and can span several columns or rows.

block-layout-item.webp

Settings:

  • Column span / Row span: How many grid columns and rows the item occupies on desktop and on mobile.
  • Link: Optional URL wrapping the whole item, with an option to open it in a new tab.
  • Layout: Direction (vertical or horizontal, with vertical on mobile), alignment, position, align text baseline, gap, wrap, reverse, clip overflow content, hide on mobile, and absolute positioning with offsets.
  • Size: Width (fit or fill), height (fit, fill, or custom), and max width for desktop and mobile.
  • Appearance: Color scheme, background (none, color, or gradient with blur), corner radius, and border.
  • Trigger on parent hover: Mark the item as a hover parent, or pick its own hover type (in/out zoom, up, down, left, right) with cascading, fade, duration, delay, strength, and a mobile disable.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block or app block.
Carousel controls

When the Layout type is Carousel, turn on Show navigation arrows and Show pagination, then style them with the Carousel navigation and Carousel pagination blocks described in Motion & Effect Blocks.

Group​

The Group block is a flexible container that stacks child blocks vertically or lays them out horizontally. Think of it as a box you can size, color, and position anywhere.

block-group.webp

Settings:

  • Link: Optional URL wrapping the whole group, with an option to open it in a new tab.
  • Layout: Direction (vertical or horizontal, with vertical on mobile), horizontal alignment (left, center, right, or space between), vertical position (top, center, or bottom), align text baseline, gap, wrap, reverse, and clip overflow content.
  • Positioning: Hide on mobile, and absolute placement (nine anchor points or fill) with top, right, bottom, and left offsets for overlays.
  • Size: Width (fit or fill), height (fit, fill, or custom), and max width for desktop and mobile.
  • Appearance: Color scheme, background (none, color, or gradient with blur), corner radius, and border.
  • Trigger on parent hover: Mark the group as a hover parent, or pick its own hover type (in/out zoom, up, down, left, right) with cascading, fade, duration, delay, strength, and a mobile disable.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block or app block.
Use case

A two-column "image + text" layout is a Group (direction: horizontal) containing an Image block and a second Group (direction: vertical) with Text and Button blocks. Turn on Vertical on mobile so the columns stack on small screens.

Tabs​

The Tabs block creates a tabbed interface where each Tab child supplies its own title and content.

block-tabs.webp

Settings:

  • Tab active: The tab that is open by default (1 = first tab).
  • Direction: Vertical (titles above the content) or horizontal (titles beside the content), with a vertical-on-mobile option.
  • Gap: Space between the tab titles and the content.
  • Reverse: Swap the order of titles and content.
  • Child blocks: Tab blocks (below).

Tab​

The Tab block is one tab: its Text is the clickable title and its child blocks are the panel content.

block-tabs-item.webp

Settings:

  • Type: Style 1 or Style 2 title design.
  • Text: The tab title (rich text).
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap for the title.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: Any theme block.

Collapse​

The Collapse block creates expandable content rows, ideal for FAQs, product details, and footer menus on mobile.

block-collapse.webp

Settings:

  • Accordion: When enabled, opening one row closes the others.
  • Divider: Show a line between rows.
  • Appearance: Color scheme, background (none, color, or gradient with blur), corner radius, and border.
  • Padding: Device-specific top, bottom, left, and right padding.
  • Child blocks: Collapse row blocks (below).

Collapse row​

The Collapse row block is one expandable item. It always carries a Collapse header and holds any theme blocks as its expandable content.

block-collapse-row.webp

Settings:

  • Open by default: Start with this row expanded.
  • Child blocks: One Collapse header (added automatically) followed by any theme blocks, typically a Group with Text.

Collapse header​

The Collapse header block is the clickable title bar of a row, with a caret or plus toggle icon.

block-collapse-header.webp

Settings:

  • Header text: The row title.
  • Icon type: Caret or Plus.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap.
  • Color: Text color from the scheme or a custom color, plus opacity.
  • Padding: Device-specific top, bottom, left, and right padding.

The Menu block renders a Shopify navigation menu as a list of links, styled through a single Link child block and laid out with the same container controls as a Group.

block-menu.webp

Settings:

  • Links: Choose a navigation menu from Online Store > Navigation.
  • Open link in new tab: Open every link in a new browser tab.
  • Layout: Direction (vertical or horizontal, with vertical on mobile), alignment, position, gap, wrap, reverse, clip overflow content, hide on mobile, and absolute positioning.
  • Size: Width, height, and max width for desktop and mobile.
  • Appearance: Color scheme, background (none, color, or gradient), corner radius, and border.
  • Trigger on parent hover: Hover parent or the block's own hover type, cascading, fade, duration, delay, strength, and mobile disable.
  • Animation: Global preset, custom effect and duration, or none.
  • Child blocks: One static Link block (below) whose settings apply to every menu item.

The Link block styles every menu item rendered by the Menu block. Labels and URLs come from the navigation menu, so its settings control only presentation.

block-menu-link.webp

Settings:

  • Reveal text effect: Gradually reveals the link text as it scrolls into view, with a starting opacity.
  • Layout: Width (fit, fill, or custom), alignment, and hide on mobile.
  • Typography: Preset or custom font, size, italic, weight, line height, letter spacing, case, and wrap.
  • Color: Text color from the scheme or a custom color, plus opacity and line clamp.
  • Animation: Global preset, custom effect and duration, or none.
  • Padding and margin: Device-specific spacing around each link.