Static Flow gives you complete control over your carousel content. Unlike Dynamic Flow which pulls from queries, Static Flow lets you manually add and arrange each slide with any content you want.
Adding a Static Flow Block
Edit a page or create a new one
Click + to add a block
Search for “Static Flow”
Starter Variations
When you insert Static Flow, you’ll see preset layouts to get started quickly:
Autoplay – Fade carousel with autoplay and progress bar. Great for hero sections.
Full Controls – Arrows with counter and pagination dots. Complete navigation experience.
Spread Controls – Counter, progress bar, and arrows spread apart. Clean, modern layout.
Numbers & Arrows – Number pagination with arrows on the right. Minimal but functional.
Inline Arrows – Arrows positioned beside the slides, pagination dots below. Classic carousel look.
Each variation is fully customizable after insertion.
Static Flow Settings
Orientation – Horizontal (default) or vertical scrolling
Direction – Left-to-right or right-to-left for RTL language support
Flow Slides Settings
Carousel Settings
Choose your carousel Mode: Slide, Loop, or Fade. Available at default (mobile) all other breakpoint:
Standard carousel that stops at edges. Best when you want users to see there’s a beginning and end.
Contain Scroll – How to handle edges:
- Trim – Remove partial slides at edges
- Keep – Keep all snap points
- Off – No containment
Slides to Show – Number visible at once (1-10), or set a manual pixel width
Slides to Scroll – How many slides advance per navigation
Duration – Animation speed (10-60ms)
Pause Inactive Media – Automatically pause videos on inactive slides
Flow Animation:
- Autoplay – Auto-advance at an interval (1-10 seconds) with optional pause on hover
- Auto Scroll – Continuous smooth scrolling (Crawl, Normal, Brisk, Fast, Rapid)
No Overflow – Hide navigation when all slides are visible, with optional alignment
Infinite scrolling that wraps around seamlessly. Best for continuous browsing.
Slides Justification – Align active slide to Start, Center, or End
Slides to Show – Number visible at once (1-10), or set a manual pixel width
Slides to Scroll – How many slides advance per navigation
Duration – Animation speed (10-60ms)
Inactive Slide Effects – Apply visual effects to non-active slides:
- Scale – Shrink inactive slides (50-100%)
- Opacity – Fade inactive slides (0-100%)
- Saturation – Desaturate inactive slides (0-100%)
Pause Inactive Media – Automatically pause videos on inactive slides
Flow Animation:
- Autoplay – Auto-advance at an interval (1-10 seconds) with optional pause on hover
- Auto Scroll – Continuous smooth scrolling (Crawl, Normal, Brisk, Fast, Rapid)
No Overflow – Hide navigation when all slides are visible, with optional alignment
Crossfade transition between slides. Always shows one slide at a time.
Duration – Animation speed (10-60ms)
Pause Inactive Media – Automatically pause videos on inactive slides
Flow Animation:
- Autoplay – Auto-advance at an interval (1-10 seconds) with optional pause on hover
- Auto Scroll is not available in Fade mode
No Overflow – Hide navigation when all slides are visible, with optional alignment
Available only other breakpoint than default:
Disables the carousel and displays items in a flexible row layout. Available at tablet breakpoint and above.
Column Size Mode – Auto (set number of columns) or Manual (set pixel width)
Columns – Number of columns (1-10)
Justification – Align items to Start, Center, or End
Disables the carousel and displays items in a CSS grid layout. Available at tablet breakpoint and above.
Column Size Mode – Auto (set number of columns) or Manual (set pixel width)
Columns – Number of columns (1-10)
Equal Heights – Make all grid items the same height
Responsive Breakpoints
Settings use a mobile-first approach with 5 breakpoints. Settings cascade upward, a value set at Mobile applies to all larger screens unless overridden.
Each breakpoint tab lets you customize:
- Mode (Slide, Loop, Fade, Flex, Grid)
- Slides to Show / Columns
- Slides to Scroll
- Duration
- Flow Animation
- And mode-specific settings
Use “Inherit” to keep the value from the previous breakpoint.
Example: Show 1 slide on mobile, 2 on tablet, 3 on laptop, then switch to Grid mode on desktop.
Child Blocks
Static Flow uses child blocks to build your carousel.
Flow Slides
The container that holds all your slides. This block manages the slide structure and spacing.
Block Gap – Control spacing between slides
Flow Slide
Individual slide containers. Add any WordPress blocks inside each slide:
- Heading, Paragraph, Image
- Buttons, Groups, Columns
- Cover blocks for background images
- Your theme’s blocks
- Other Groundworx blocks
Each slide can have completely different content and layout.
To add more slides: Click inside Flow Slides and use the block inserter to add new Flow Slide blocks.
To reorder slides: Use the block toolbar’s move handles or drag and drop in the List View.
To duplicate slides: Select a Flow Slide and use the block toolbar’s “Duplicate” option.
Navigation Blocks
Add these inside Dynamic Flow or Static Flow to control how users navigate:
Previous and next slide buttons. Automatically inherits your theme’s default button styles from theme.json. Customize further with colors, spacing, and border radius.
Dot/bullet indicators showing which slide is active. Choose from multiple shape options and customize colors.
Clickable slide numbers (1, 2, 3…). Users can jump directly to any slide. Automatically inherits your theme’s default button styles from theme.json.
Displays slide position as text. Options include:
- Prefix – Text before the counter (e.g., “Slide “)
- Separator – Character between current and total (default: “/”)
- Suffix – Text after the counter (e.g., ” of collection”)
- Show Total – Toggle to show or hide the total count
Example outputs: “1/5”, “Slide 2 of 10”, “3 / 8 items”
Animated progress bar that adapts to your carousel settings:
- Height – Customize the bar thickness
- Standard mode – Shows percentage of slides viewed (e.g., viewing slide 3 of 5 = 60%)
- With Autoplay – Fills during the autoplay interval, resets when slide advances
- With Auto Scroll – Continuously fills as the carousel scrolls, synced to scroll position
Mixing with WordPress Blocks
Navigation blocks can be placed anywhere inside Dynamic Flow or Static flow—above, below, or beside the slides. Wrap them in Groups or Columns for custom layouts.
Example: Place arrows on the left and right edges using a Columns block, with dot pagination centered below.
Example Use Cases
Hero Slider: Full-width slides with background images, headings, and call-to-action buttons. Use Fade mode with Autoplay for a classic hero experience.
Feature Showcase: Highlight 3-5 key features with custom icons, descriptions, and links. Use Loop mode for infinite browsing.
Client Logos: Display partner or client logos. Use Auto Scroll for continuous movement without interaction.
Before/After Gallery: Show project transformations with completely custom layouts per slide.
Optional: Customize with theme.json
This is optional—Static Flow works great with default styling.
Static Flow inherits your theme’s styles automatically. If you want to customize the look of carousel buttons and pagination, you can use theme.json.
Global button styles affect arrow buttons and pagination:
{
"styles": {
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--primary)",
"text": "var(--wp--preset--color--white)"
},
"border": {
"radius": "4px"
}
}
}
}
}
Block-level styles let you target only Static Flow:
{
"styles": {
"blocks": {
"groundworx/static-flow": {
"elements": {
"button": {
"color": {
"background": "var(--wp--preset--color--secondary)"
},
"border": {
"radius": "50%"
}
}
}
}
}
}
}
Next Steps
- Try different starter variations to see which fits your needs
- Experiment with mixing different navigation blocks
- Check how the carousel responds on mobile devices