The Row block enables you to create horizontal layouts with flexible alignment and spacing controls. This versatile layout block serves as a foundation for organizing content in rows, providing precise control over element positioning and responsive behavior across all devices.
Adding a Row Block
To add a Container block to your page:
- Click the + button in the block editor
- Search for “Row” or navigate to the DigiBlocks category
- Click on the Row block to insert it
Layout Configuration
Content Width Settings
Content Width – Define the maximum width of the row’s content area using responsive controls with pixel units. Default values are 1200px for desktop with responsive scaling for tablet and mobile devices.
Content Max Width – Set the maximum width as a percentage of the parent container using responsive controls with percentage units. Default is 90% to ensure proper margins on all devices.
Height Controls
Height Type – Choose how the row’s height is determined:
Auto – Height adjusts automatically based on content
Custom – Set specific height values using responsive controls
Full Screen – Row expands to fill the entire viewport height
Min Height – Set minimum height values using responsive controls with pixel units to ensure consistent layout proportions across devices.
Alignment Options
Horizontal Alignment – Control how content aligns horizontally within the row:
Left – Aligns content to the left side
Center – Centers content horizontally
Right – Aligns content to the right side
Space – Distributes content with equal spacing
Vertical Alignment – Control how content aligns vertically within the row:
Top – Aligns content to the top
Center – Centers content vertically
Bottom – Aligns content to the bottom
Spacing Controls
Gap – Set the spacing between child elements using responsive controls with pixel units. Default is 20px for desktop with proportional scaling for smaller devices.
Padding – Control internal spacing within the row container:
Top Padding – Space above the content
Right Padding – Space to the right of content
Bottom Padding – Space below the content
Left Padding – Space to the left of content
Margin – Set external spacing around the entire row:
Top Margin – Space above the row
Right Margin – Space to the right of the row
Bottom Margin – Space below the row
Left Margin – Space to the left of the row
Visual Styling
Background Options
Background Color – Set solid background colors with full alpha transparency support for sophisticated color layering effects.
Background Gradient – Create stunning gradient backgrounds with comprehensive controls:
Enable Gradient – Toggle gradient background on or off
Gradient Type – Choose between linear and radial gradients
Gradient Angle – Control direction for linear gradients (0-360 degrees)
Gradient Position – Set center point for radial gradients
Color Stops – Add multiple colors with precise position control
Background Image – Upload and configure background images with advanced options:
Image Selection – Choose from media library or upload new images
Image Position – Control background positioning (center, top, bottom, etc.)
Image Repeat – Set repeat behavior (no-repeat, repeat, repeat-x, repeat-y) Image Size – Configure sizing (cover, contain, auto, custom)
Image Attachment – Choose between scroll and fixed positioning
Border Styling
Border Style – Select from various border styles including solid, dashed, dotted, double, groove, ridge, inset, and outset.
Border Width – Set border thickness using responsive controls with pixel units for precise border sizing across all devices.
Border Color – Choose border colors with alpha transparency support for seamless integration with your design.
Border Radius – Apply rounded corners using responsive controls with both pixel and percentage units:
Top Left Radius – Control top-left corner rounding
Top Right Radius – Control top-right corner rounding
Bottom Right Radius – Control bottom-right corner rounding
Bottom Left Radius – Control bottom-left corner rounding
Shadow Effects
Box Shadow – Add depth with customizable shadow effects:
Horizontal Offset – Control shadow position horizontally
Vertical Offset – Control shadow position vertically
Blur Radius – Set shadow softness
Spread Radius – Control shadow size
Shadow Color – Choose shadow color with opacity control
Inset Shadow – Toggle between outer and inner shadows
Advanced Features
Responsive Visibility
Control row visibility across different devices for optimized mobile experiences:
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
Hidden elements appear with reduced opacity in the editor for easy identification while remaining completely hidden on the frontend.
Animation Effects
Add engaging entrance animations to capture visitor attention:
Animation Type – Choose from fade, slide, zoom, bounce, and other animation effects
Animation Duration – Control animation timing with responsive settings
Animation Delay – Set animation start delay for choreographed effects
Preview Animation – Test animations directly in the editor with the preview button
Animations trigger automatically when users scroll the row into view, creating dynamic and engaging page experiences.
Nested Row Support
Nested Mode – Enable when placing rows inside other layout blocks for proper width calculations and inheritance.
Nested Width – Control width behavior for nested rows:
Auto – Width adjusts automatically to parent container
Full – Expands to fill entire parent width
Custom – Set specific width values for precise control
Advanced Layout Options
Overflow Hidden – Toggle to hide content that extends beyond the row boundaries, useful for creating clean layouts with background elements.
Z-Index – Control stacking order when elements overlap, with higher values appearing above lower values.
Custom CSS Classes – Add custom CSS classes for additional styling and JavaScript targeting.
Anchor ID – Set HTML anchor IDs for direct linking and smooth scrolling navigation.
Best Practices
Performance Optimization
Use row blocks strategically to create efficient layouts without excessive nesting. Combine with appropriate gap settings to reduce the need for additional spacing elements.
Responsive Design
Always test row layouts across device sizes using the responsive preview options. Set appropriate content widths and max-widths to ensure optimal viewing on all devices.
Layout Strategy
Plan your row structure before building by sketching the desired layout. Use nested rows sparingly and only when necessary for complex designs to maintain clean, performant code.