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:
Available only other breakpoint than default:
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:
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