説明
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
Features:
- 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
How to use:
- 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
スクリーンショット
The Sparkle dashboard with all presets and live preview 
The floating Live Editor — fine-tune any preset in real time on your page 
Preset card expanded — shape, motion, color, size, speed and more 
Mode-specific controls for line, focal point and circle orbit presets 
Sparkles in action on a live Divi 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
FAQ
-
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
0.5.3
- 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
0.5.2
- New: floating Live Editor panel with colour swatches, sliders and position controls
- New: donation banner for Dolly’s cancer treatment fund
0.4.1
- Fixed: deleting custom presets failed after page reload
- Fixed: preset id missing from user presets array on init
0.4.0
- Updated: tested and confirmed compatible with WordPress 6.9.4
0.3.21
- Fixed: duplicating a custom preset now works correctly
0.3.20
- New: custom presets now support an editable description field
- New: description can be set during duplication and edited on the preset card
0.3.19
- Documentation: all 28 controls fully documented with numbered screenshots
0.3.18
- Added documentation page with full controls reference
- Added FAQ page
- Improved preset card UI
0.1.0
- Initial release
- 10 built-in sparkle presets
- Admin preset library with live preview
- Global settings panel
- IntersectionObserver for performance
- prefers-reduced-motion support