Give your Divi theme a festive feel this holiday with a subtle falling snow effect. Here's how to add falling snow to any Divi section, row or module. Like this:
We wish you a merry Christmas
We wish you a merry Christmas
We wish you a merry Christmas and a happy new year
Good tidings we bring to you and your kin
We wish you a merry Christmas and a happy new year
To achieve this, first add the following PHP code to your site. It's reasonably long, but don't worry – you shouldn't have to modify it in any way:
// PHP: Hook to add the falling snow effect to sections with the 'falling-snow' class
if ( ! function_exists( 'divibooster_add_falling_snow_to_section' ) ) {
function divibooster_add_falling_snow_to_section( $output, $render_slug, $module ) {
if ( is_string( $output ) && isset( $module->props['module_class'] ) && in_array( 'falling-snow', explode( ' ', $module->props['module_class'] ) ) ) {
// Inject a container to hold the falling snow effect that will be managed by JavaScript
$snow_container = '<div class="falling-snow-container"></div>';
// Insert our falling snow container HTML just inside the main element
$output = preg_replace( '/^(<div [^>]*>)/', '$1' . $snow_container, $output, 1 );
}
return $output;
}
add_filter( 'et_module_shortcode_output', 'divibooster_add_falling_snow_to_section', 10, 3 );
}
// CSS: Basic styles for the falling snow container and snowflakes
if (!function_exists('divibooster_falling_snow_css')) {
function divibooster_falling_snow_css() {
?>
<style>
.falling-snow-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
}
.snowflake {
position: absolute;
top: -10px;
color: #fff;
opacity: 0.8;
font-size: 1em; /* Adjust size as needed */
will-change: transform; /* For better performance */
pointer-events: none; /* Disables events on the snowflakes themselves */
}
@keyframes fall-left {
from { transform: translateY(0) rotateY(0deg); }
to { transform: translateY(100vh) rotateY(360deg); }
}
@keyframes fall-right {
from { transform: translateY(0) rotateY(0deg); }
to { transform: translateY(100vh) rotateY(-300deg); }
}
</style>
<?php
}
add_action( 'wp_head', 'divibooster_falling_snow_css' );
}
if (!function_exists('divibooster_falling_snow_js')) {
function divibooster_falling_snow_js() {
?>
<script>
(function() {
var snowContainers = document.querySelectorAll('.falling-snow-container');
if (snowContainers.length === 0) {
return; // Exit if there are no containers
}
// Function to create a single snowflake and animate its fall and rotation
function createSnowflake(container) {
var snowflake = document.createElement('div');
snowflake.className = 'snowflake';
snowflake.innerHTML = '❄'; // Unicode snowflake character
var snowflakeStyle = snowflake.style;
snowflakeStyle.left = (Math.random() * 100) + '%';
/*snowContainer.appendChild(snowflake);*/
container.appendChild(snowflake);
// Randomize various style properties
snowflakeStyle.opacity = Math.random();
snowflakeStyle.fontSize = (Math.random() * 0.5 + 0.5) + 'em';
// Set random duration and rotation speeds for animations
var fallDuration = (Math.random() * 5 + 5) + 's';
var spinDirection = Math.random() < 0.5 ? 'left' : 'right';
snowflakeStyle.animation = 'fall-' + spinDirection + ' ' + fallDuration + ' linear infinite';
// Remove the snowflake after it has fallen
setTimeout(() => {
snowflake.remove();
}, parseFloat(fallDuration) * 1000); // Convert duration string to milliseconds
}
// Create new snowflakes at 300ms intervals inside each container
snowContainers.forEach(function(container) {
setInterval(function() {
createSnowflake(container);
}, 300);
});
})();
</script>
<?php
}
add_action( 'wp_footer', 'divibooster_falling_snow_js', 100 );
}
Related Post: Adding PHP to the Divi Theme

I have tried this on 2 website and it will not save and update the page after completion.
Hey John, sorry to hear it's not working for you. Is there any chance you're able to send through an example of one of the pages you tried it on, so that I can look in to it for you? Thanks!