To add Film grain effect in Events Page background image, you can follow these.
#1. Edit Event Page > Add a Classic Editor Section.
Next, choose a Blank Section
#2. Next, edit Section > Add Grain Effect
We will have
#3. Find ID of this Classic Section
In my example, we will have: section[data-section-id=“67a9cee54c89a807345edad3”]
#4. Use this code to Custom CSS box
If code doesn’t work, you can comment below, message or email me.
/* Graint Effect */
section[data-section-id="67a9cee54c89a807345edad3"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
min-height: unset !important;
height: auto !important;
}
section.page-section:has(.eventlist-title) {
.section-border, .section-background {
background-color: transparent !important;
}
}
#5. Next, use this code to Event Page Header Injection (or Code Injection > Footer)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.sqs-events-collection-list.events.events-list.events-stacked').appendTo('section[data-section-id="67a9cee54c89a807345edad3"] .content-wrapper .content');
});
</script>
#6. Result
