Sparkle for Divi
| 开发者 | felix1958 |
|---|---|
| 更新时间 | 2026年4月4日 05:28 |
| 捐献地址: | 去捐款 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 6.9 |
| 版权: | GPL-2.0+ |
| 版权网址: | 版权信息 |
详情介绍:
Sparkle for Divi lets you add stunning particle animations to any Divi module by simply adding a CSS class. No shortcodes, no custom code — just copy a class and paste.
20 built-in presets:
- ✨ Gold Elegance
- 🌟 Silver Shimmer
- 🌸 Rose Glow
- 🎉 Rainbow Celebration
- 🔥 Fire Sparks
- ❄️ Snow Drift
- 🌿 Mint Breeze
- 💙 Neon Blue
- 💜 Neon Purple
- ❤️ Red Passion
- 💎 Focal Point
- ⭕ Circle Orbit
- ✦ Horizontal – Gold
- ✦ Horizontal – White
- ✦ Horizontal – Rainbow
- 🌠 Night Sky
- ❙ Vertical – Left
- ❙ Vertical – Right
- ↘ Diagonal – Top Left
- ↙ Diagonal – Top Right
- 4 particle shapes: Star, Dot, Square, Confetti
- 4 motion types: Sparkle, Float, Fall, Spin
- Line modes: Horizontal, Vertical, Diagonal, Focal Point, Circle Orbit
- Live Editor — floating panel to fine-tune any preset in real time directly on your page
- Live preview on every preset card — see changes in real time in the dashboard
- Custom presets: duplicate any preset and give it your own name, class and description
- Apply up to 3 presets on one module simultaneously
- Global on/off switch without removing classes
- Respects prefers-reduced-motion for accessibility
- Activates only when visible in the viewport (saves CPU and battery)
- Global particle cap (400) prevents performance issues
- Pure CSS keyframes and inline SVG — no canvas, no heavy libraries
- Frontend footprint: CSS + JS under 30 KB — Live Editor loads only in the Divi Builder
- Go to Sparkle for Divi in the WordPress admin menu
- Pick a preset and customize it to your liking
- Click 💾 Save changes — then 📋 Copy class
- Open any Divi module → Advanced → Attributes → Class → paste the class
- Save your page and visit it — sparkles appear automatically!
- Optional: click ⚡ Live Preview to open the floating Live Editor and fine-tune your preset in real time directly on the page
安装:
- Upload the
sparkle-for-divifolder to/wp-content/plugins/ - Activate the plugin through the Plugins menu in WordPress
- Go to Sparkle for Divi in the admin menu to get started
屏幕截图:
常见问题:
Does this work with Divi 5?
Yes — Sparkle for Divi is built and tested specifically for Divi 5. The class is added via Advanced → Attributes → Class.
Will it slow down my site?
No. The plugin loads two small files on the frontend (CSS + JS, under 30 KB total). The Live Editor loads only inside the Divi Builder — never on the visitor-facing page. Animations only run when the module is visible in the viewport. A global cap of 400 particles prevents runaway scenarios.
Does it support accessibility?
Yes. Enable "Respect prefers-reduced-motion" in the Settings tab to automatically disable animations for visitors who prefer less motion.
Can I create my own presets?
Yes — click Duplicate on any preset to create a personal copy with your own class name, title and description.
Can I apply multiple presets to one module?
Yes — separate up to 3 class names with a space in the CSS Class field.
What is the Live Editor?
The Live Editor is a floating panel that opens directly on your page. Adjust sliders and see the sparkle effect update instantly — no switching between tabs. When happy, click Save preset to persist the changes.
Does it work in the Divi visual editor?
Sparkles are designed for the frontend. Apply the class, save, and view the live page to see the effect. Use the Live Editor (⚡ Live Preview button) to fine-tune directly in the Divi Builder.
更新日志:
0.6.1
- Security: all PHP output now runs through WordPress escaping functions (esc_html, esc_attr, esc_url)
- Security: all $_POST inputs now use wp_unslash() before processing
- Security: heredoc syntax replaced with standard escaped strings
- Security: $wpdb queries suppressed with phpcs:ignore where intval() cast makes prepare() redundant
- Code quality: removed load_plugin_textdomain() — no longer needed since WordPress 4.6
- Code quality: short PHP tags (<?=) replaced with <?php echo throughout all admin files
- Improved: version bump to 0.6.1 reflecting full WordPress.org Plugin Check compliance
- New: Live Editor — floating panel to fine-tune presets in real time directly on your page
- New: Live Editor has two tabs — Particles and Advanced (position + display)
- New: Advanced tab adapts automatically to the preset type (line, circle, point, spread)
- New: Contain to element toggle now updates live via the Live Editor
- New: Travel distance slider shows/hides dynamically based on shape and motion in both dashboard and Live Editor
- Fixed: Motion buttons now hidden for Star shape in Live Editor (no effect on star)
- Fixed: In-use badge no longer triggers false positives for presets whose ID is a substring of another preset ID
- Improved: renamed "Drift/Fall" to "Fall" consistently across dashboard, Live Editor and documentation
- Improved: panel width increased to 400px, mini preview strip removed
- Improved: colour swatches updated to full 17-colour palette
- New: floating Live Editor panel with colour swatches, sliders and position controls
- New: donation banner for Dolly's cancer treatment fund
- Fixed: deleting custom presets failed after page reload
- Fixed: preset id missing from user presets array on init
- Updated: tested and confirmed compatible with WordPress 6.9.4
- Fixed: duplicating a custom preset now works correctly
- New: custom presets now support an editable description field
- New: description can be set during duplication and edited on the preset card
- Documentation: all 28 controls fully documented with numbered screenshots
- Added documentation page with full controls reference
- Added FAQ page
- Improved preset card UI
- Initial release
- 10 built-in sparkle presets
- Admin preset library with live preview
- Global settings panel
- IntersectionObserver for performance
- prefers-reduced-motion support