Layout Settings in DigiBlocks provide global control over the default dimensions and spacing for your blocks, particularly the Container block. These settings establish the foundation for your site’s design consistency and ensure your content displays properly across all devices.
Accessing Layout Settings
- Navigate to your WordPress admin dashboard
- Go to DigiBlocks > Settings
- Locate the Layout Settings section near the top of the page
Content Width Setting
The Content Width setting defines the default maximum width for container blocks in pixels. This setting establishes the primary content area width for your website.
Default Value
- Default: 1200 pixels
- Range: 300 to 2000 pixels
- Step: 10 pixels
How It Works
When you add a Container block to your page, it will automatically use this width as its default maximum width. Users can still override this setting on individual Container blocks if needed.
Recommended Values
- Standard websites: 1200px (recommended default)
- Wide layouts: 1400px – 1600px
- Narrow/blog-focused sites: 800px – 1000px
- Full-width designs: 1800px – 2000px
Considerations
- Choose a width that complements your theme’s design
- Consider your target audience’s common screen resolutions
- Ensure readability isn’t compromised with overly wide text lines
- Test on various devices to ensure proper display
Content Max Width Setting
The Content Max Width setting defines the default maximum width for container blocks as a percentage of the viewport width. This setting works in conjunction with the Content Width setting to ensure responsive behavior.
Default Value
- Default: 90 percent
- Range: 10 to 100 percent
- Step: 1 percent
How It Works
This percentage-based setting ensures your content doesn’t stretch to the full viewport width on larger screens while maintaining appropriate spacing on smaller devices. The actual width will be the smaller of either the Content Width (in pixels) or the Content Max Width (as a percentage of viewport).
Recommended Values
- Standard layouts: 90% (recommended default)
- Full-width designs: 95% – 100%
- Conservative layouts: 80% – 85%
- Mobile-optimized: 95% – 100%
How Layout Settings Work Together
The Content Width and Content Max Width settings work together to create a responsive layout system:
- On large screens: The Content Width (pixels) typically takes precedence
- On smaller screens: The Content Max Width (percentage) ensures proper spacing
- Breakpoint behavior: The smaller of the two values is applied
Example Scenarios
Scenario 1: Standard Configuration
- Content Width: 1200px
- Content Max Width: 90%
- Result: On a 1400px screen, content is 1200px wide. On a 800px screen, content is 720px wide (90% of 800px).
Scenario 2: Wide Layout
- Content Width: 1600px
- Content Max Width: 95%
- Result: Allows for wider content on large screens while maintaining good spacing on smaller devices.
Scenario 3: Conservative Layout
- Content Width: 1000px
- Content Max Width: 85%
- Result: Creates a more centered, focused content area with generous margins.
Applying Layout Settings
Automatic Application
- Settings automatically apply to new Container blocks
- Existing blocks retain their individual settings unless manually updated
- No page refresh required – changes take effect immediately
Individual Block Overrides
While layout settings provide defaults, you can override them on individual Container blocks:
- Select the Container block in the editor
- In the block settings panel, modify the width settings
- Individual block settings take precedence over global settings
Best Practices
Choosing Appropriate Values
Content Width Guidelines:
- Consider your theme’s design and sidebar layouts
- Ensure text line length remains readable (45-75 characters)
- Account for your site’s typical content types
- Test with your most common content layouts
Content Max Width Guidelines:
- Leave sufficient margin space on smaller devices
- Consider touch interface requirements on mobile
- Ensure content doesn’t feel cramped
- Test across various device sizes
Theme Compatibility
Working with Different Themes:
- Full-width themes: Consider higher max width percentages (95-100%)
- Boxed themes: Lower percentages (80-90%) may work better
- Custom themes: Coordinate with your theme’s container widths
- Page builders: Test compatibility with your specific page builder
Content Type Considerations
Text-heavy content:
- Narrower widths improve readability
- Consider 800-1000px for blog posts
- Maintain proper line spacing
Media-rich content:
- Wider layouts showcase images and videos better
- Consider 1200-1400px for portfolios and galleries
- Ensure images scale properly within containers
E-commerce layouts:
- Product grids benefit from wider layouts
- Consider 1200-1600px for product catalogs
- Balance product visibility with page performance
Responsive Behavior
Mobile Optimization
Layout settings automatically adapt to mobile devices:
- Content Max Width percentage ensures proper mobile spacing
- Touch-friendly margins are maintained
- Content remains accessible on small screens
Tablet Considerations
- Mid-range screen sizes use percentage-based calculations
- Content scales smoothly between mobile and desktop breakpoints
- Maintains readability across device orientations
Desktop Display
- Content Width pixel values typically control desktop layouts
- Ensures consistent appearance across various monitor sizes
- Prevents content from becoming too wide on large displays
Common Layout Patterns
Blog/News Websites
Content Width: 800px - 1000px
Content Max Width: 85% - 90%Optimizes for reading experience and text readability.
Business Websites
Content Width: 1200px - 1400px
Content Max Width: 90% - 95%Balances professional appearance with content accessibility.
Portfolio/Creative Sites
Content Width: 1400px - 1600px
Content Max Width: 95% - 100%Maximizes visual impact while maintaining usability.
E-commerce Stores
Content Width: 1200px - 1500px
Content Max Width: 90% - 95%Accommodates product grids while ensuring mobile compatibility.
Testing Your Layout Settings
Preview Methods
- Editor Preview: Use the editor’s preview function to see changes
- Device Testing: Test on actual devices or browser developer tools
- Responsive Design Mode: Use browser tools to simulate various screen sizes
Key Testing Points
- Content readability at different screen sizes
- Image and media display quality
- Navigation and interaction usability
- Loading performance across devices
Performance Considerations
Impact on Page Speed
- Layout settings themselves don’t directly affect loading speed
- Properly configured layouts can improve perceived performance
- Consider content loading patterns when setting widths
Mobile Performance
- Appropriate max width percentages reduce unnecessary white space
- Better mobile experience can improve engagement metrics
- Responsive layouts reduce need for separate mobile versions
Integration with Other DigiBlocks Features
Container Block Relationship
Layout settings provide default values for:
- Container block width settings
- Maximum width calculations
- Responsive breakpoint behavior
Theme Builder Compatibility
When using DigiBlocks with theme builders:
- Layout settings affect header and footer containers
- Global settings ensure consistency across templates
- Individual template adjustments remain possible
Asset Generation
Layout settings influence:
- Generated CSS files for optimal performance
- Media query breakpoints in compiled stylesheets
- Font loading and spacing calculations
Troubleshooting Layout Issues
Content Too Wide
Problem: Content appears too wide on desktop screens Solution: Reduce Content Width value or Content Max Width percentage
Content Too Narrow
Problem: Content appears cramped with excessive margins Solution: Increase Content Width value or Content Max Width percentage
Mobile Display Issues
Problem: Content doesn’t display properly on mobile devices Solution: Adjust Content Max Width percentage to allow more responsive behavior
Inconsistent Layouts
Problem: Different pages show varying content widths Solution: Check individual Container block settings that may override global settings
Theme Conflicts
Problem: Layout settings don’t seem to take effect Solution: Verify theme compatibility and check for CSS conflicts in browser developer tools
Remember that layout settings provide the foundation for your site’s design consistency. Take time to test different configurations and choose values that work best for your specific content and audience needs.