=== Sparkle for Divi === Contributors: felix1958 Tags: animation, particles, divi, effects, visual effects Requires at least: 6.0 Tested up to: 6.9 Requires PHP: 7.4 Stable tag: 1.0.0 License: GPL-2.0+ License URI: https://www.gnu.org/licenses/gpl-2.0.html Donate link: https://steunactie.be/actie/support-dolly-s-pain-free-future-and-life-extending-treatment/-41609 Add beautiful sparkle and particle animations to any Divi 5 section, row or module β€” no coding required. == Description == **Sparkle for Divi** lets you add stunning particle animations to any Divi section, row or 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:** * 5 particle shapes: Star, Dot, Square, Confetti, Custom (upload your own PNG) * 6 motion types: Sparkle, Float, Fall, Spin, Float+Spin, 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 * Undo: up to 3 snapshots per preset β€” step back whenever you need to * Apply up to 3 presets on one element simultaneously * Global on/off switch without removing classes * Respects prefers-reduced-motion for accessibility * Activates only when the element enters the viewport (saves CPU and battery) * Global particle cap prevents performance issues on busy pages * Pure CSS keyframes β€” no canvas, no heavy libraries * Frontend footprint under 40 KB β€” Live Editor loads only inside the Divi Builder, never on visitor-facing pages **How to use:** 1. Go to **Sparkle for Divi** in the WordPress admin menu 2. Pick a preset and customize it to your liking 3. Click **πŸ’Ύ Save changes** β€” then **πŸ“‹ Copy class** 4. Open any Divi section, row or module β†’ **Advanced β†’ Attributes β†’ Class** β†’ paste the class 5. Save your page and visit it β€” sparkles appear automatically! 6. Optional: click **⚑ Live Preview** to open the floating Live Editor and fine-tune your preset in real time directly on the page == Installation == 1. In your WordPress admin, go to **Plugins β†’ Add New Plugin** 2. Search for **Sparkle for Divi** 3. Click **Install Now**, then **Activate** 4. Go to **Sparkle for Divi** in the admin menu to get started == Frequently Asked Questions == = Does this work with Divi 5? = Yes β€” Sparkle for Divi is built and tested specifically for Divi 5. Add the class via Advanced β†’ Attributes β†’ Class on any section, row or module. = Will it slow down my site? = No. The plugin loads two small files on the frontend (CSS + JS, under 40 KB total). The Live Editor loads only inside the Divi Builder β€” never on the visitor-facing page. Animations only activate when the element enters the viewport, and a global particle cap prevents any runaway scenarios on busy pages. = Does it support accessibility? = Yes. Enable "Respect prefers-reduced-motion" in the Settings tab to automatically disable animations for visitors who prefer reduced motion. = Can I use my own shapes? = Yes β€” upload any PNG (max 100x100 px, 50 KB) as a custom particle shape. Logos, icons, anything goes. = 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. Changes are fully independent of the original. = Can I undo changes? = Yes β€” each preset keeps up to 3 snapshots. Click Undo on the preset card to step back one change at a time. = Can I apply multiple presets to one element? = 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 inside the Divi Builder. Adjust sliders and see the sparkle effect update instantly β€” no switching between tabs. When happy, click Save preset to persist the changes to the dashboard. = Does it work in the Divi visual editor? = Sparkles are designed for the frontend. Apply the class, save your page, and use the Live Editor (click the Live Preview button on any preset card) to fine-tune everything in real time directly in the builder. == Screenshots == 1. The Sparkle dashboard with all presets and live preview 2. The floating Live Editor β€” fine-tune any preset in real time on your page 3. Preset card expanded β€” shape, motion, color, size, speed and more 4. Mode-specific controls for line, focal point and circle orbit presets 5. Sparkles in action on a live Divi page == Upgrade Notice == = 1.0.0 = Major update β€” Live Editor improvements, reset/sync fixes, workflow tabs in the dashboard, custom shape upload, Float+Spin and Fall+Spin motions, undo support, and much more. == Changelog == = 1.0.0 = This is where things stop being "pretty good" and start behaving like they should. A lot has changed since the first release β€” most of it invisible, all of it noticeable. Live Editor that finally behaves * Changes apply instantly (no second-guessing) * Reset now actually resets β€” and sticks * What you see = what's saved (wild concept, we know) Animations that make sense * Consistent behavior across all shapes * Float+Spin and Fall+Spin now do exactly what their names suggest * No more "why is this one acting weird?" moments Bring your own shapes * Upload PNGs and use them as particles * Logos, icons, experiments… go for it UI that explains itself * Hover anything β†’ get a clear answer (no jargon, promise) * Better visibility for controls and info elements * Less guessing, fewer surprises Presets that don't fight back * Reliable behavior across the board * Duplicate, undo, edit β€” all predictable now * Jump from preset β†’ Live Editor with fewer clicks (because five clicks was a bit much) * Clear feedback on where things are used Badges that tell the truth * "In use" badges now update instantly when you add or remove effects * No more ghost badges from unsaved changes * Changes in the builder are reflected without manual refreshes * Everything stays in sync β€” even when Divi takes its time Behind the scenes (where most of the work actually went) * Fixed a lot of edge cases (especially inside the Divi Builder) * Resolved timing issues between builder saves and database updates * Previews and live updates are now stable instead of "usually fine" * Removed fragile logic (including one that broke… pretty much everything πŸ˜…) * Cleaner code, fewer hacks, better performance Solid foundation (no drama) * Proper input validation (so things don't go off the rails) * Full WordPress standards compliance * General cleanup to keep future updates sane In short: It does what you expect now. Consistently. Every time. And yes β€” even the badges behave.