Seventh > Sections > Section grid

Section Grid

The Section Grid section is a versatile grid layout system that can display any type of cards in a structured grid. It supports both standard grid layouts and editorial/scattered card arrangements, making it perfect for creating magazine-style layouts, product showcases, or mixed content displays.

What It Does

This section displays cards in a flexible grid where:

• Cards can be arranged in a standard grid or scattered editorial style
• Grid can display as a standard grid or slider
• Supports all card types (Product Cards, Article Cards, Collection Cards, regular Cards, Hotspots Cards, etc.)
• Cards automatically arrange based on grid settings
• Can create uniform or varied card layouts

Section Settings Explained

Layout Options

Layout Controls how cards are displayed

Cards Size (Desktop) Controls how many cards appear per row when header is at top

Cards Size (Desktop with Left Header) Controls card size when header is positioned on the left

Cards Size on Mobile Controls how many cards appear per row on mobile:

• Small (2 per row) - Two cards side by side
• Large (1 per row) - One card per row (full width)

Cards Alignment Controls how cards align when they have different heights

Stretch Alignment Type (Only appears when "Stretch" is selected

Grid Gap Controls the spacing between cards

Cards Arrangement

Scatter Cards (Only appears when layout is "Grid")

• When enabled: Cards are arranged in a scattered, editorial-style layout
• When disabled: Cards are arranged in a uniform grid
• Creates a magazine-style, organic layout

Scatter Cards on Mobile (Only appears when "Scatter Cards" is enabled)

• When enabled: Scattered layout applies on mobile devices
• When disabled: Cards use standard grid on mobile

Horizontal Spacing (Only appears when "Scatter Cards" is enabled)

• Controls horizontal spacing between scattered cards
• Options: XSmall (0), Small (0.05), Medium (0.1), Large (0.15), XLarge (0.2)
• Larger values create more spacing between cards

Vertical Scattering (Only appears when "Scatter Cards" is enabled)

• Controls vertical offset/scattering of cards
• Options: XSmall (1), Small (1.5), Medium (2), Large (2.5), XLarge (3)
• Creates varied card heights and positions

Gap Between Rows (Only appears when "Scatter Cards" is enabled)

• Controls spacing between rows of scattered cards
• Options: XSmall (1), Small (1.5), Medium (2), Large (2.5), XLarge (3)

Randomize Card Sizes (Only appears when layout is "Slider")

• When enabled: Cards have randomized sizes in the slider
• When disabled: All cards have uniform size

Randomize Card Sizes on Mobile (Only appears when "Randomize Card Sizes" is enabled)

• When enabled: Randomized sizes apply on mobile
• When disabled: Cards use uniform size on mobile

Section Header

Position Where the section header appears

Stick to Top

• When enabled: Header stays visible when scrolling
• When disabled: Header scrolls with the page

Section Header Block The Section Header block can contain:

• Heading blocks for titles
• Text blocks for descriptions
• Button blocks for call-to-actions
• Icon blocks and other common blocks

Section Design Options

Color Scheme

• Choose from your theme's color schemes
• Applies to the entire section

Top Padding

• Controls space above the section
• Options: None, Smaller, Default, Larger, Largest

Bottom Padding

• Controls space below the section
• Options: None, Smaller, Default, Larger, Largest

Extend Section Width

• When enabled: Section extends to full browser width
• When disabled: Section stays within container width

Show Media Background

• When enabled: You can add a background image or video
• When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

• Upload an image or video for the section background

Background Overlay (Only appears when background is set)

• Add a color overlay on top of the background
• Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

• Adds a scrolling parallax effect to the background
• Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

• Adjusts how content sits on the background

Make Section Full Height

• Makes the section fill the entire viewport height

Available Cards in Section Grid

The Section Grid section can contain any of these card types:

Content Cards:

• Card
• Flex Card
• Rich Text Card
• Promo Card

Product Cards:

• Product Card
• Featured Product Card

Content-Specific Cards:

• Article Card
• Collection Card
• Page Card
• Links Card

Special Cards:

• Hotspots Card
• Before/After Card

Each card can contain its own blocks and be customized independently.

Common Use Cases

Magazine-Style Editorial Layout

• Enable "Scatter Cards" for organic, editorial feel
• Mix different card types and sizes
• Use varied card content for visual interest
• Perfect for lookbooks, editorials, or brand stories

Product Showcase Grid

• Use standard grid layout
• Add Product Cards or Featured Product Cards
• Set to 3-4 cards per row
• Uniform card sizes for clean product display

Mixed Content Display

• Combine Product Cards, Article Cards, and regular Cards
• Use scattered layout for editorial feel
• Create engaging content mixes
• Great for homepage hero sections

Testimonials Slider

• Use slider layout
• Add Cards with testimonial content
• Include Star Rating blocks
• Enable randomized sizes for variety

Shop the Look

• Use scattered editorial layout
• Add Hotspots Cards with product hotspots
• Create interactive product discovery
• Perfect for fashion and lifestyle stores

Tips for Success

Grid Layout

• Standard Grid - Use for uniform, clean layouts
• Scattered Layout - Use for editorial, magazine-style layouts
• Card Size - 3-4 cards per row works well for most content
• Mobile - Always test on mobile devices

Content Mixing

• Consistent Styling - Use similar card styles for cohesion
• Varied Content - Mix different card types for interest
• Visual Hierarchy - Use larger cards for featured content

Editorial Layout

• Spacing - Adjust horizontal and vertical spacing for desired effect
• Card Count - 6-12 cards work well for scattered layouts
• Content Balance - Balance text-heavy and image-heavy cards

Slider Layout

• Card Count - 3-6 cards visible at once works best
• Randomization - Use randomized sizes for visual variety
• Navigation - Ensure cards are easy to navigate

Troubleshooting

Cards Not Arranging Correctly

Problem: Cards don't align properly in the grid.

Solutions:

1. Check Grid Style - Verify grid vs slider is set correctly
2. Card Size Settings - Ensure card size settings are appropriate
3. Editorial Mode - If using scattered layout, adjust spacing settings
4. Content Height - Cards with more content will be taller

Scattered Layout Issues

Problem: Scattered cards look too random or not random enough.

Solutions:

1. Adjust Spacing - Fine-tune horizontal and vertical spacing
2. Row Gap - Adjust gap between rows for better flow
3. Card Count - More cards create more scattered effect
4. Mobile Settings - Consider disabling scattered layout on mobile

Slider Not Working

Problem: Slider doesn't scroll or display correctly.

Solutions:

1. Check Card Count - Ensure multiple cards are added
2. JavaScript - Verify theme JavaScript is loading
3. Browser Support - Check browser compatibility

Header Positioning Issues

Problem: Header doesn't position correctly.

Solutions:

1. Check Position Setting - Verify top vs left setting
2. Card Size - Left header affects available card size options
3. Sticky Header - Sticky only works when header is at top