This famous WordPress template works through sections or modules including is able to break down the page content and add a design to each.
Using this skill, you will be able to discover the way to avoid the monotony of the backgrounds of the single color web pages or with the images downloaded from the web.
Although Divi gives you the option to design your own page, you can download the pre-made designs if you wish.
Therefore, we explain how to create this particular design in your WordPress template to improve the display of your page.
What are sections in Divi and how can you insert them on your page?
These are nothing more than horizontal blocks, considered the largest sections within the Divi builder.
They have the characteristic of being stacked to classify the content that will be inserted into the website design, so it can be considered as the " casing ".
Among the settings that contain these blocks, you can manually add a background with an animated gradient inside the " Design options ".
Steps to create a section block and access its settings
After making sure you have activated Divi visual builder, you need to click on the colored button " + ”To add the section. It will then show you a window that will allow you to add three types of options: " Standard "," Full width " is " Analysis ".
Once you have selected one of these, you will have the possibility to choose the structure of the columns for the rows that the section will contain.
Finally, you will be able to insert modules and the option " Section Settings ", Where you will see the list of changes for" Content "," Planning " is " Advanced ".
How to add an animated gradient background with Divi? Step by step
The method we will use is to create the desired gradient background by adjusting the background that contains the Divi constructor along with the CSS snippets. So, start by creating a new page on the WordPress platform and use the Divi builder to choose the option " Build from scratch ".
Before you you will have a blank canvas. Here you will add a single column row as explained above.
Within the section configuration it is necessary to configure the content of " Padding " on 12vw top and add " Height: 40vw "In the gray box that appears below" Core CSS elements ".
From this point you will begin to configure the gradient background, where you will access the option of " Background or backdrop "To press the button" Shade ".
Under this, you can choose the colors of the gradients, the type of gradient you want and the direction it should take.
This way, resize your block to 100% width and height to start creating the animation you want.
This will be done via a custom CSS modification, so you need to add a specific class for the section you are editing; then, you have to enter the form " Advanced "And place the name of the animation under" CSS class ".
Code to add an animated wallpaper in Divi
Once this class is added, you can add the code module and insert the following into the box " Code "Inside the tags .
. cheer up the gradient {
Background size: 400% 400%;
Animation: gradient 5s infinite ease;
}
@keyframe gradient {
0% {
Background position: 0% 50%;
}
fifty% {
Background position: 100% 50%;
}
100% {
Background position: 0% 50%;
}
}
This way you were able to set your gradient background with a width of 400% of the original size and its animation is a movement on both sides.
In addition to the design advantages that Divi offers you, it also has many tools to make your page a favorite among Internet users, such as being able to use BreadCrumbs to improve the page's SEO or insert a drop-down menu for its use and manipulation. it's easier.
