Container Block

The Container block is the foundation of layout design in DigiBlocks. It provides a flexible and powerful way to create structured layouts with columns, background elements, and advanced styling options. Think of it as a sophisticated wrapper that can hold other blocks and organize them in professional layouts.

Adding a Container Block

To add a Container block to your page:

Click the + button in the block editor
Search for “Container” or navigate to the DigiBlocks category
Click on the Container block to insert it

Upon insertion, you’ll see a layout selector displaying various column configurations to choose from.

Layout Selection

The Container block offers multiple pre-built layout options:

Available Layouts

1 Column: Single full-width column
2 Columns Equal: Two equal-width columns (50% each)
3 Columns Equal: Three equal-width columns (33.33% each)
4 Columns Equal: Four equal-width columns (25% each)
1/3 + 2/3: Two columns with 33.33% and 66.67% widths
2/3 + 1/3: Two columns with 66.67% and 33.33% widths
1/4 + 1/4 + 2/4: Three columns with 25%, 25%, and 50% widths
2/4 + 1/4 + 1/4: Three columns with 50%, 25%, and 25% widths
1/4 + 2/4 + 1/4: Three columns with 25%, 50%, and 25% widths
5 Columns Equal: Five equal-width columns (20% each)
6 Columns Equal: Six equal-width columns (16.67% each)
1/6 + 4/6 + 1/6: Three columns with sidebar-content-sidebar layout

Changing Layouts

To change the layout after initial selection:

Select the Container block
In the block settings panel, go to the Layout tab
Click Change Layout button
Select your new desired layout

Note: When changing to a layout with fewer columns, content from removed columns will be moved to the last remaining column.

Layout Settings

Content Layout

For top-level containers (not nested), you can choose between:

Boxed: Content is contained within specified width constraints
Full Width: Content spans the entire viewport width

Content Dimensions

When using Boxed layout:

Content Width: Set the maximum width in pixels (default: 1200px)
Content Max Width: Set the maximum width as a percentage of viewport (default: 90%)

These settings are responsive and can be configured differently for desktop, tablet, and mobile devices.

Height Settings

Configure how tall your container should be:

Auto: Height adjusts to content
Full: Takes full viewport height (100vh)
Custom: Set a specific minimum height in pixels

Alignment Options

Horizontal Alignment: Control how columns are distributed horizontally

Left: Align columns to the left
Center: Center columns
Right: Align columns to the right
Space: Distribute columns with equal space between them

Vertical Alignment: Control how content aligns vertically within the container

Top: Align content to top
Middle: Center content vertically
Bottom: Align content to bottom

Spacing Controls

Flex Wrap

Control how columns behave when they don’t fit in available space:

No Wrap: Columns stay on one line (may cause overflow)
Wrap: Columns wrap to new lines as needed

Gap Controls

Column Gap: Space between columns horizontally
Row Gap: Space between rows when columns wrap

Both gap controls support multiple units (px, %, em, rem) and are fully responsive.

Padding and Margin

Set internal spacing (padding) and external spacing (margin) for the container. Both support:

Individual control for top, right, bottom, left sides
Responsive settings for different devices
Multiple units (px, %, em, rem)

Note: Container blocks automatically enforce a minimum padding of 10px in the editor to ensure content doesn’t touch the edges but that padding is not added in front.

Responsive Settings

Stacking Options

Stack on Tablet: Force columns to stack vertically on tablet devices
Stack on Mobile: Force columns to stack vertically on mobile devices
Reverse Columns on Mobile: Reverse the order of columns on mobile (useful for changing content priority)

Visibility Controls

Hide the container on specific devices:

Hide on Desktop: Hide on screens 992px and wider
Hide on Tablet: Hide on screens between 768px and 991px
Hide on Mobile: Hide on screens 767px and narrower

Editor Note: Hidden elements appear with reduced opacity in the editor for easy editing, but are completely hidden on the frontend.

Styling Options

Borders and Radius

Border Style: Choose from None, Solid, Dashed, Dotted, or Double
Border Width: Set width for each side individually (when border style is not “None”)
Border Color: Choose the border color with alpha transparency support
Border Radius: Round the corners with individual control for each corner

Box Shadow

Create depth with drop shadows:

Normal State: Shadow that appears by default
Hover State: Shadow that appears when hovering over the container
Configure horizontal/vertical offset, blur, spread, and color
Support for both outer and inner (inset) shadows

Advanced Styling

Overflow Hidden: Clips content that extends beyond container boundaries
Z-Index: Control stacking order (-99 to 99)

Background Options

Background Color

Set a solid background color with alpha transparency support for semi-transparent backgrounds.

Background Image

Upload and configure background images:

Image Settings:

Background Position: 9 position options (top-left, top-center, etc.)
Background Repeat: No-repeat, Repeat, Repeat-X, Repeat-Y
Background Size: Cover, Contain, Auto, or 100%

Background Video

Add video backgrounds for dynamic, engaging content:

Upload a video file (MP4 or WEBM recommended)
Optionally set a fallback image for better loading experience
Videos auto-play, are muted, and loop continuously

Best Practices for Background Videos:

Keep file sizes under 5MB for good performance
Use short clips (10-30 seconds) that loop well
Always provide a fallback image
Ensure videos are optimized for web

Background Overlay

Add colored overlays on top of background images/videos:

Overlay Color: Choose any color with transparency
Overlay Opacity: Control transparency from 0 (invisible) to 1 (solid)
Blend Mode: Choose how the overlay blends with the background:

Normal, Multiply, Screen, Overlay
Darken, Lighten, Color Dodge, Color Burn
Hard Light, Soft Light, Difference, Exclusion
Hue, Saturation, Color, Luminosity

Advanced Features

Animation

Add entrance animations to make your container appear with style:

Select an animation from the dropdown (fade-in, slide-up, etc.)
Use the Preview Animation button to test the effect
Animations trigger when the container enters the viewport

HTML Anchor

Set a unique anchor ID to create jump links:

Enter a unique identifier (no spaces)
Use this anchor in links: #your-anchor-name
Perfect for creating navigation menus or “back to top” links

Additional CSS Classes

Add custom CSS classes for advanced styling or third-party integrations.

Nested Containers

Containers can be nested inside other containers for complex layouts:

Nested containers don’t show content width/max-width controls
Nested containers inherit responsive behavior from parent
Useful for creating card layouts, sidebars, or multi-level structures

Best Practices

Performance Optimization

Minimize Nested Containers: While powerful, excessive nesting can impact performance
Optimize Background Videos: Keep file sizes small and provide fallback images
Use Appropriate Image Sizes: Choose optimal image dimensions for background images

Responsive Design

Test on Multiple Devices: Always preview your layouts on different screen sizes
Use Stacking Wisely: Consider how content priority changes on mobile devices
Adjust Spacing: Reduce padding/margins on smaller screens for better space utilization

Content Organization

Logical Structure: Use containers to group related content
Consistent Spacing: Maintain consistent gap and padding values across similar containers
Visual Hierarchy: Use background colors and spacing to create clear content sections

Accessibility

Sufficient Contrast: Ensure text remains readable over background images/videos
Meaningful Structure: Use containers to create logical content sections
Alternative Content: Provide fallback images for background videos

Common Use Cases

Hero Sections

Create full-width hero sections with background videos or images, overlay text, and call-to-action buttons.

Feature Grids

Use multi-column layouts to showcase features, services, or team members in organized grids.

Content Sections

Organize page content into distinct sections with different background colors or images.

Sidebars

Create sidebar layouts using asymmetrical column configurations (1/3 + 2/3 or 2/3 + 1/3).

Card Layouts

Nest containers within columns to create card-style layouts with backgrounds and shadows.

The Container block is your primary tool for creating professional, responsive layouts in DigiBlocks. Master its features to build sophisticated page designs that work beautifully across all devices.