Download Plugin

Section Container Block

Written by

in

Overview

The Section Container Block is the most versatile and important layout block in DesignSetGo. It creates full-width sections for your page with powerful layout controls, background options, and content width constraints. Perfect for building hero sections, feature areas, testimonials, and any distinct page section.

Key Features

  • Full-Width or Constrained: Control whether content spans full width or is centered with max-width
  • Rich Backgrounds: Colors, gradients, images, or video backgrounds
  • Spacing Controls: Padding and margin with responsive options
  • Min/Max Height: Control section height with viewport units support
  • Vertical Alignment: Align content top, center, or bottom
  • Inner Container: Automatic content width constraint using theme settings
  • Background Overlay: Add color overlays to background images

How to Use

  1. Click the + button in the editor
  2. Search for Section
  3. Add your content inside the Section block
  4. Configure width constraints in settings
  5. Add background color, gradient, or image
  6. Adjust spacing and height
  7. Preview and publish

Block Settings

Layout Settings

  • Constrain Width: Enable to limit content width (uses theme content size)
  • Content Width: Custom max-width for content area
  • Min Height: Minimum section height (pixels or viewport units)
  • Vertical Alignment: Top, center, or bottom content alignment
  • Tag Name: HTML tag (section, div, article, header, footer)

Background Settings

  • Background Color: Solid color or gradient
  • Background Image: Upload or select from media library
  • Background Position: Control image positioning
  • Background Size: Cover, contain, or custom
  • Background Attachment: Scroll or fixed (parallax effect)
  • Background Overlay: Add semi-transparent color overlay

Spacing Settings

  • Padding: Internal spacing (top, right, bottom, left)
  • Margin: External spacing
  • Block Gap: Space between child blocks
  • Responsive Spacing: Different values per breakpoint

Common Use Cases

  • Hero Sections: Full-screen welcome areas with CTAs
  • Feature Sections: Highlight key features or benefits
  • Testimonials: Customer reviews with background styling
  • Call-to-Action Areas: Prominent conversion sections
  • About Sections: Team, company, or product information
  • Pricing Tables: Product or service pricing displays
  • Contact Sections: Forms and contact information
  • Footer Areas: Site footer with multiple columns

Width Constraint Pattern

The Section block uses a two-div pattern for proper width handling:

  • Outer Container: Full-width, handles backgrounds
  • Inner Container: Constrained width, centers content

Theme Integration

When “Constrain Width” is enabled without a custom width, the Section uses your theme’s content size setting (typically 1140px). This ensures consistency across your site.

Background Tips

Images

  • Use high-quality images optimized for web (WebP format recommended)
  • Typical size: 1920x1080px or larger for full-width sections
  • Add overlay for better text readability (30-60% opacity works well)
  • Use background-size: cover for full coverage

Gradients

  • Use subtle gradients for professional appearance
  • Combine with your brand colors
  • Linear gradients work well for directional emphasis
  • Radial gradients create focal points

Best Practices

  • Use semantic HTML tags (section, header, footer) for better SEO
  • Maintain consistent spacing between sections (80-120px padding)
  • Ensure text has sufficient contrast against backgrounds
  • Test responsive behavior on all breakpoints
  • Use min-height sparingly – let content determine height when possible
  • Combine with Grid or Row blocks for complex layouts
  • Add appropriate ARIA labels for accessibility
  • Optimize background images for performance

Responsive Design

  • Reduce padding on mobile (40-60px vs 80-120px on desktop)
  • Adjust min-height for smaller screens (400-600px vs 600-800px)
  • Consider disabling background-attachment: fixed on mobile
  • Stack nested Row/Grid blocks vertically on mobile
  • Test vertical alignment on all screen sizes

Accessibility

  • Use proper heading hierarchy inside sections
  • Ensure color contrast meets WCAG AA standards (4.5:1)
  • Add alt text to background images if they convey meaning
  • Use semantic HTML tags for better screen reader navigation
  • Test keyboard navigation through section content

Performance Considerations

  • Optimize background images (compress, use WebP)
  • Use lazy loading for below-fold sections
  • Avoid excessive nested sections
  • Minimize use of background-attachment: fixed (impacts performance)
  • Use CSS gradients instead of gradient images when possible

Troubleshooting

  • Content too wide: Enable “Constrain Width” setting
  • Background image not showing: Check image URL, verify upload success
  • Text not readable: Add background overlay, increase opacity
  • Height too small: Adjust min-height or increase padding
  • Spacing inconsistent: Check responsive spacing settings
  • Nested sections breaking: Review width constraint settings on child sections

More posts