The Container block is a fundamental building block that serves as a flexible wrapper for organizing and styling content. It can hold any theme or app blocks and provides extensive customization options for spacing, colors, borders, backgrounds, positioning, and layout. Think of it as a versatile box that can be styled in countless ways to group related content, create visual sections, add backgrounds, and control how content appears and behaves on your pages.
The Container block is used extensively throughout the theme to create structured layouts, organize content, and apply consistent styling to groups of blocks. It's the foundation for building complex layouts while maintaining flexibility and design consistency.
Common use cases
Group related blocks with consistent spacing and styling
Create visually distinct sections with background colors or images
Build card-like layouts with borders, radius, and padding
Organize content within accordions, dropdowns, and other nested structures
Create clickable card sections by adding a URL
Implement sticky navigation bars or headers
Build overlay content that appears on top of other elements
Create hover-reveal content with the "Show on hover" option
Control responsive layouts with device-specific visibility settings
Add scroll-triggered animations to content sections
Compatible blocks
The following blocks can be nested within this block:
All theme blocks
App blocks
Block settings
General
Setting
Description
Options
Show advanced settings
Reveals 14 advanced options including top spacing, bottom spacing, and more
Checkbox (default: false)
Content
Setting
Description
Options
URL
Optional URL to make the entire container clickable
URL input
Enable background image or video
Enables background image or video settings
Checkbox (default: false)
Image background desktop
Desktop background image
Image picker
Visible when enable background image or video is true
Image background mobile
Mobile background image
Image picker
Visible when enable background image or video is true
Video background
Background video
Video picker
Visible when enable background image or video is true
Show video on mobile
Displays video on mobile devices
Checkbox (default: true)
Visible when enable background image or video is true
Show entire image
Shows the full image without cropping
Checkbox (default: false)
Visible when enable background image or video is true
Spacing
Setting
Description
Options
Top spacing
Spacing above the container
0 - 300 px (default: 0)
Visible when Show advanced settings is on
Bottom spacing
Spacing below the container
0 - 300 px (default: 0)
Visible when Show advanced settings is on
Enable horizontal padding
Adds horizontal padding inside the container
Checkbox (default: false)
Enable vertical padding
Adds vertical padding inside the container
Checkbox (default: false)
Enable margin
Adds margin around the container
Checkbox (default: false)
Gap size
Spacing between child blocks
• None • Default (default) • Xs • Sm • Md • Lg • Xl
