Welcome back, fellow Divi creators! In today’s Divi tutorial, today we’re diving deep into the world of particle effects. We found an awesome particle effects library that we thought would work great on Divi modules. I’m here to guide you through the process of adding a burst of confetti to your Divi buttons, step by step. Whether you’re working with a Divi button module, a Divi Contact Form, or a Divi Form Builder module, I’ll show you how to sprinkle some excitement onto your website. Let’s get started!
Method 1: Adding Confetti to a Divi Button Module
Adding confetti to a Divi button module is simpler than you might think. If you just want a quick snippet to add a confetti effect to a Divi Button module, click here.
Here’s a detailed breakdown:
Add a Custom Class to Your Button:
- Open your Divi Builder and navigate to the button module where you want to add the effect.
- Go to the Advanced tab and look for the CSS ID & Classes section.
- In the CSS Class field, enter
confetti-button(this is the class we’ll target with our JavaScript).
Insert a Code Module:
- Directly below your button module, add a new code module.
- This is where we’ll add our scripts to trigger the confetti.
Include the Canvas Confetti Library:
- In the code module, add the script tag below to load the Canvas Confetti library from the CDN.
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/confetti.browser.js"></script>
Add the JavaScript Trigger:
- Below the script tag, add another tag to house your JavaScript code.
- Copy and paste the JavaScript snippet below.
- This code will listen for a click event on the class for the confetti button (
.confetti-button) and activate the confetti when the button is clicked.
<script>
// Listens for the 'DOMContentLoaded' event to ensure the HTML is fully loaded before running the script.
document.addEventListener('DOMContentLoaded', function() {
// Selects the first element with the class '.confetti-button' as the target button.
const button = document.querySelector('.confetti-button'); // You can change the class, just make sure it is defined in the module also.
// Adds an event listener for the "click" event on the targeted button.
button.addEventListener('click', function(event) {
// Retrieves the position and size of the button to calculate where the confetti should appear.
const rect = button.getBoundingClientRect();
// Calculates the horizontal (x) center of the button.
const x = (rect.left + rect.right) / 2;
// Calculates the vertical (y) center of the button.
const y = (rect.top + rect.bottom) / 2;
// Configures the settings for the confetti effect.
const confettiSettings = {
particleCount: 100, // Defines the number of confetti particles.
spread: 70, // Sets the spread angle of the confetti.
// Specifies the origin point for the confetti effect based on the button's location.
origin: { x: x / window.innerWidth, y: y / window.innerHeight }
};
// Triggers the confetti effect with the defined settings when the button is clicked.
confetti(confettiSettings);
});
});
</script>
Save and Test:
- Save the code module and exit the Divi Builder.
- Test the button on your live site to witness the confetti effect upon clicking.
Method 2: Divi Contact Form Module Magic
Adding confetti to a Divi Contact Form module is just as easy, but if you just want a quick snippet to add a confetti effect to a Divi Contact Form module, click here.
Here’s a detailed breakdown:
Identify the Submit Button Class:
- Use your browser’s developer tools to inspect the submit button on your contact form.
- The class should be
.et_pb_contact_submit.
Add a Code Module:
Just as in Method 1, add a new code module to your page where the contact form is located.
Load the Canvas Confetti Library and JavaScript:
- Include the Canvas Confetti library script tag as before.
- Add the JavaScript snippet below, making sure the class for the confetti button is the submit button class you found earlier.
<script>
// Event listener for when the DOM (Document Object Model) is fully loaded.
document.addEventListener('DOMContentLoaded', function() {
// Selects the first submit button within the Divi Contact Form module.
var submitButton = document.querySelector('.et_pb_contact_submit');
// Checks if the submit button exists to prevent errors if the button is not found.
if (submitButton) {
// Adds a new class 'confetti-button' to the submit button for later reference.
submitButton.classList.add('confetti-button');
}
// Selects the button with the class 'confetti-button'.
const confettiButton = document.querySelector('.confetti-button');
// Checks if the confetti button exists to avoid errors.
if (confettiButton) {
// Attaches an event listener for a 'click' event on the confetti button.
confettiButton.addEventListener('click', function(event) {
// Gets the position and dimensions of the confetti button.
const rect = confettiButton.getBoundingClientRect();
// Calculates the horizontal (x) and vertical (y) center points of the button.
const x = (rect.left + rect.right) / 2;
const y = (rect.top + rect.bottom) / 2;
// Defines settings for the confetti effect.
const confettiSettings = {
particleCount: 100, // Number of confetti particles.
spread: 70, // Spread angle of the confetti.
// Sets the origin point for the confetti effect based on button's position.
origin: { x: x / window.innerWidth, y: y / window.innerHeight }
};
// Triggers the confetti effect with the defined settings.
confetti(confettiSettings);
});
}
});
</script>
Increase Specificity (Optional):
- To ensure the correct button triggers the effect, add an extra class to your contact form module under the Advanced tab.
- Update the JavaScript snippet to target the class for the confetti button within this new class (
.form-class .button-class).
Customize and Save:
- Modify the confetti settings in the JavaScript snippet as per your preference (more info).
- Save the code module and exit the Divi Builder to test the effect.
Method 3: The Divi Form Builder Form Module
Now, if you are building awesome Divi forms with Divi Form Builder, the process is not much different, but if you just want a quick snippet to add a confetti effect to your Divi Form Builder forms, click here.
Here’s a detailed breakdown:
Find the Form Submit Button Class:
Inspect the form’s submit button to discover .divi-form-submit.
Insert a Code Module and Load the Library:
Place a new code module on your page and include the Canvas Confetti library script tag the same as in Method 1.
Add the JavaScript for Confetti:
- Copy and paste the code below into the code module.
- Make sure the snippet targets
.divi-form-submitor whatever the button class is you found in the first step.
<script>
document.addEventListener('DOMContentLoaded', function() {
// Adding the 'confetti-button' class to a specific submit button
var submitButton = document.querySelector('.divi-form-submit'); //set your selector here
if (submitButton) {
submitButton.classList.add('confetti-button'); //confetti-button class being added to the element above
// Attaching the confetti effect to the button with the 'confetti-button' class
submitButton.addEventListener('click', function(e) {
if (!e.target.matches('.confetti-button')) return; // Check if the clicked element has the class
// Calculate the button's position for the confetti effect
const rect = submitButton.getBoundingClientRect();
const x = (rect.left + rect.right) / 2;
const y = (rect.top + rect.bottom) / 2;
// Configure confetti settings
const confettiSettings = {
particleCount: 100, // Number of particles generated
spread: 70, // How far do the particles spread from the origin
origin: { x: x / window.innerWidth, y: y / window.innerHeight } // The center point of where the particles originate from
};
// Trigger the confetti effect
confetti(confettiSettings);
});
}
});
</script>
Customize Your Confetti Settings:
Within the JavaScript snippet, adjust the confetti settings to fit your design (more info).
Increase Specificity if Needed:
- To ensure the correct button triggers the effect, add an extra class to your contact form module under the Advanced tab.
- Update the JavaScript snippet to target the class for the confetti button within this new class (
.form-class .button-class).
Save, Exit, and Marvel:
Save your changes, exit the Divi Builder, and click the submit button on your form to enjoy the confetti explosion.
Wrapping Up
With these detailed steps, you can add an element of interactive fun to your Divi buttons, making your website more engaging for your visitors. Feel free to play with the settings to create an experience unique to your site.
And remember, the Divi Engine blog is your go-to resource for more Divi tips and tricks. If you’re looking to expand your Divi toolkit, don’t forget to check out our all-access pass for a comprehensive array of Divi-enhancing tools. Happy building, and let the confetti fly! 🎉
