In this comprehensive guide, we'll take a deep dive into the Container Block inside Grigora. Mastering the Container Block will help you create clean, responsive designs and organize your content like a pro by structuring pages, holding multiple inner blocks, and customizing every aspect of your layout.
General Settings Configuration
Display Properties
You get two main display options: Block and Flex for different layout approaches.
When you select Flex, you can control:
-
Direction: Column or row layout for content arrangement
-
Wrap: Wrap or no wrap for content flow behavior
-
Align Content: Control horizontal and vertical alignment within the container
-
Gap: Set spacing between elements along with custom units for precise control
Dimensions Control
Define your container size with comprehensive dimension options:
Width and Height: Add specific values or set to auto for flexible sizing
Max Height/Width and Min Height/Width: For responsive control that adapts to different screen sizes
Container Functionality
Container Tag: Choose HTML semantic tags for better SEO and accessibility
Overflow: Control how content behaves when it exceeds container size
Link Functionality: Make your container clickable with URL input for links, open in new tab toggle, and remove link decoration toggle
Dynamic Source: Link to homepage, CMS posts, categories, or directory listings for dynamic content integration
Style Settings
Color Customization
Set text and link colors for content inside the container with hover effects and transition timing for smooth interactive experiences.
Background Options
Choose from three background types with dynamic source options and device-specific settings:
Color: Solid backgrounds for clean, minimalist designs
Gradient: Linear/radial gradients for modern, dynamic visual effects
Image: With size, position, repeat, and fixed settings for complete control over background imagery
Background Overlay: Apply overlays on top of backgrounds with opacity control and device-specific settings for enhanced visual appeal
Advanced Settings
Layout Control
Margin and Padding: Apply individually or uniformly with hover effects and transition timing. Both can be linked or unlinked for precise spacing control throughout your design.
Visual Enhancement
Borders: Add borders with hover effects and transition timing with linked/unlinked settings for consistent or varied border styling
Box Shadow: Add multiple box shadows with editing and deletion options, full hover support with transitions for depth and visual interest
Component System
Convert any container into a site-wide component for consistent reuse across your website. Changes to components automatically update across your entire site, ensuring design consistency.
Animation and Effects
Entrance Animations: Choose from various entrance animations with custom configuration options for unique effects that engage visitors
CSS Transform Animations: Advanced transform controls for initial, hover, and infinite animations including shift, rotate, skew, and scale effects with custom timing and positioning
Mouse Movement: Enable containers to respond to mouse movement with opposite or same direction displacement in 2D or 3D space for modern interactive experiences
Display and Positioning
Visibility: Show or hide containers on specific devices (desktop, tablet, or mobile) for tailored responsive experiences
Position: Control container positioning with Z-index, left, right, top, and bottom values for precise element placement
Sticky Behavior: Make containers stick to top or bottom with offset controls and parent container limits, plus device-specific disable options available
Visual Effects and Customization
Filters: Apply visual filters and backdrop filters with blend mode options initially and on hover for sophisticated visual effects
Custom Classes and IDs: Add custom CSS classes and ID names for advanced styling and JavaScript targeting, giving developers additional control
Transition Times: Centralized management of all transition timings — edit, delete, or create new transitions from one location for consistent animation timing