To add animation to the background image of a full-width slider in Divi, you can use CSS animations. Here’s a step-by-step guide on how to achieve this:
Step 1: Open the Page with Divi Fullwidth Slider Go to the page where you have the Divi Fullwidth Slider module added.
Step 2: Find the Background Image Class Inspect the full-width slider section to find the CSS class that controls the background image. The class should start with .et_pb_slider .et_pb_slide. It may also include a slide number, like .et_pb_slide_1 or .et_pb_slide_2.
Step 3: Add Custom CSS Animation In the WordPress dashboard, go to “Divi > Theme Options” and click on the “Custom CSS” tab.
Now, add the custom CSS animation to the background image class you found earlier. For example, let’s add a simple scaling animation:
/* Example of scaling animation */
.et_pb_slider .et_pb_slide_1 {
animation: scaleAnimation 5s infinite;
}
/* CSS Keyframes for scaling animation */
@keyframes scaleAnimation {
0% { transform: scale(1); }
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}
In this example, the background image of the first slide will have a scaling animation that lasts for 5 seconds and repeats infinitely. You can modify the animation properties, duration, and keyframes as per your requirements.
Step 4: Save and Preview After adding the CSS animation, click on “Save Changes” and preview your page with the Divi Fullwidth Slider. You should see the animation applied to the background image of the first slide.
Feel free to experiment with different CSS animations and properties to create the desired effect. You can use various animation properties like opacity, translate, rotate, etc., to create more complex animations. Additionally, you can apply animations to other slides by changing the slide number in the CSS selector (e.g., .et_pb_slide_2 for the second slide).
0 Comments