Box layouts combine text and images into stylised card-like designs. They're ideal for displaying products, services, team members, pricing tiers, or calls to action. Three layout types give you flexibility in how content and imagery work together.
Layout Types#
Text Over Image
Text and content overlay a background image. Includes an adjustable overlay colour and opacity for readability, hover animations, and customisable transparency. This layout creates a bold, visual-first presentation.
Text Under Image
The image sits above the text content in a clean, structured format. Suitable for product showcases, team profiles, or any content where the image introduces the text below.
Text Next to Image
Image positioned alongside text with configurable image-to-text ratio controls. Supports alternating left/right positioning for visual variety across multiple boxes.
Common Settings#
All layout types share these settings: boxes per row (controls wrapping), desktop/tablet and mobile image heights, width options (auto or fixed with alignment), box spacing and padding, carousel mode for horizontal scrolling, rounded corners, and button styling.
Adding and Managing Boxes#
Hover over the box layout and click the plus icon to add more boxes, either create a new one or select from existing boxes. To change the layout type, click the settings icon, select a new layout, and apply. Your content carries over to the new format automatically.
Editing Individual Boxes#
Each box supports image uploads via the file manager, title and description fields, alt text for accessibility and SEO, button text with internal or external links, an icon from a library of over 1,600 options, and custom colour scheme overrides.
Carousel Mode#
Enable carousel mode to transform your boxes into a horizontal scrolling display. Features include auto-scroll with adjustable speed and direction, and per-row display settings for different screen sizes. Carousel mode is particularly useful for logo displays, client showcases, or compact content presentations.
Styling#
Boxes inherit your site's theme styling automatically. To override the default colours for individual boxes, use the settings icon in the top-right corner. For site-wide box styling, use the Style Editor.
Use consistent image dimensions across all boxes in a row for a polished look. If your images vary in size, consider enabling square cropping or fixed height mode.