The “Sliding Diagonals Background Widget” allows you to create eye-catching, animated backgrounds using smooth transitions between four overlapping colors with varying transparencies. This widget adds dynamic motion and visual depth by continuously shifting diagonal layers, bringing your WordPress Elementor website to life. You can customize the colors, transition speed, direction, and transparency levels to perfectly match your site’s aesthetic.
Let’s explore the features of the “Sliding Diagonals Background Widget” below.
Add Sliding Diagonals Background Widget to Elementor
This widget requires Unlimited Elements PRO version installed and activated on your WordPress website.
Go to Unlimited Elements and click "Background Widgets".
Search for "Sliding Diagonals Background" in the widget library.
Hover over the widget and click Install.
Add Sliding Diagonals Background to Elementor section
Click edit container in Elementor.
Go to the "Style" tab.
Click on "Unlimited Background".
Select the background type “Sliding Diagonals Background“.
Elementor Sliding Diagonals Background customizable settings
Color One
Select the first color for the diagonal effect using the color picker.
Color Two
Select the second color for the diagonal effect using the color picker.
Layer One Duration
Specify the animation duration for the first diagonal layer (in seconds).
Layer Two Duration
Specify the animation duration for the second diagonal layer (in seconds).
Layer Three Duration
Specify the animation duration for the third diagonal layer (in seconds).
Opacity
Adjust the transparency of the diagonal effect (e.g., 0–100%).
Set Background Location in Elementor Sliding Diagonals Background
In Background
Places the sliding diagonals effect behind your content, ideal for subtle background enhancements.
In Foreground
Displays the sliding diagonals effect in front of your content for a more prominent visual impact.
Site Body Background
Applies the effect to the entire site body background, covering the full page behind all elements.
Site Body Foreground
Places the effect on top of all site body content, overlaying everything globally.
Layout Background
Restricts the effect to the background of a specific section or widget layout.
Layout Foreground
Displays the effect in front of a section or widget layout, overlaying its content.
Usage Examples of Elementor Sliding Diagonals Background
Here are some live use cases for the Sliding Diagonals Background widget.
Image Tooltip with a Elementor Sliding Diagonals Background.
Logo Grid with an Animated Elementor Sliding Diagonals Background.
Thank you for using the Sliding Diagonals Background Widget for Elementor! With its smooth transitions between four overlaying colors and varying transparencies, this widget creates a dynamic, moving background that adds energy and visual interest to any section of your website. If you have any questions or need assistance, feel free to reach out. For more inspiration and live demos, be sure to check out our website.
