Effects · Gutenberg
Floating Stats block for WordPress
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance.
Inspector panels on this block: Image, Cards Style, Default card colors, Stat Cards, Card colors. Those titles come from index.js, not from a shared template.
Behavior controls: “Aspect ratio” options: 4:5 (Portrait), 1:1 (Square), 16:9 (Landscape), 3:4; “Card style preset” options: Shadow card, Glass (frosted), Solid / flat; “Position” options: Top left, Top right, Middle left, Middle right, Bottom left.
Where to find it
Gutenberg inserter → Effects → search “Floating Stats” (block name `blockenberg/floating-stats` in block.json). Style it in the sidebar after insert.
How to use Floating Stats block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Floating Stats”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Image. Set “Aspect ratio”, “Image border radius (px)”, “Image drop shadow”, “Max width (px)”.
- Check the published page. The view script reads HTML data attributes: data-count-up. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Aspect ratio | Select control; the chosen value is saved on the block. Options: 4:5 (Portrait); 1:1 (Square); 16:9 (Landscape); 3:4. block.json default: 4:5. Saved as `imageAspectRatio`. |
| Image border radius (px) | Numeric range control in the inspector. Range 0–48. block.json default: 20. Saved as `imageRadius`. |
| Image drop shadow | On/off toggle in the inspector. On by default. Saved as `imageShadow`. |
| Max width (px) | Numeric range control in the inspector. Range 200–900. block.json default: 540. Saved as `wrapMaxWidth`. |
| Card style preset | Select control; the chosen value is saved on the block. Options: Shadow card; Glass (frosted); Solid / flat. block.json default: shadow. Saved as `cardStyle`. |
| Card padding (px) | Numeric range control in the inspector. Range 8–40. block.json default: 16. Saved as `cardPadding`. |
| Card border radius (px) | Numeric range control in the inspector. Range 0–32. block.json default: 12. Saved as `cardRadius`. |
| Show icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon size (px) | Numeric range control in the inspector. Range 12–48. block.json default: 22. Saved as `iconSize`. |
| Count-up animation | On/off toggle in the inspector. On by default. Saved as `countUpAnimation`. |
| Card background | Color control in the inspector. block.json default: #ffffff. Saved as `globalCardBg`. |
| Card text | Color control in the inspector. block.json default: #111827. Saved as `globalCardColor`. |
| Section background | Color control in the inspector. Saved as `bgColor`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–200. block.json default: 48. Saved as `paddingBottom`. |
| Value | Text field in the inspector. |
| Label | Text field in the inspector. |
| Stat Cards — Icon | Select control; the chosen value is saved on the block. |
| Position | Select control; the chosen value is saved on the block. Options: Top left; Top right; Middle left; Middle right; Bottom left; Bottom right. |
| Card colors — Background | Color control in the inspector. |
| Label text | Color control in the inspector. |
| Value color | Color control in the inspector. |
What the front-end script actually does
- The view script reads HTML data attributes: data-count-up.
- An IntersectionObserver starts work when the block enters the viewport.
When this is the right block
- A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance — that is the job of Floating Stats, not a generic content block.
- Use it when you need the editor control labeled “Aspect ratio”, which exists on this block’s inspector.
- It matches pages about floating, stats, hero.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Floating Stats block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Floating Stats”. It sits under Effects. After insert, open Image and set “Aspect ratio”, “Image border radius (px)”, “Image drop shadow”, “Max width (px)”.
What makes Floating Stats different from other Blockenberg blocks?
A hero image composition with floating achievement/statistic cards positioned around it. Common SaaS and agency pattern for showing credibility at a glance. Inspector labels on this block include “Aspect ratio”, “Image border radius (px)”, “Image drop shadow”, “Max width (px)”.
Is the Floating Stats Gutenberg block free?
Yes. Floating Stats ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Floating Stats to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Image, Cards Style, Default card colors, Stat Cards).
Related effects blocks
Animated Text
Heading with animated cycling words — typewriter, fade, slide, or flip effects. Perfect for hero sections.
Card Carousel
Horizontal drag-to-scroll card carousel with rich cards, autoplay, arrows, dots, and responsive column settings.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Card Stack
A fanned or stacked pile of cards with hover-spread interaction. Perfect for testimonials, case studies, or feature highlights.
Hover Card
Card that reveals hidden content (overlay) when hovered with customizable direction and animation.
Image Reveal
Image with a curtain reveal effect triggered on hover or scroll, with overlay label and caption.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Floating Stats from the Gutenberg inserter.