As you begin to learn about the design methodology that WordPress has enabled with Divi, you will discover that there is the possibility of adding an animated gradient background within your website.
This famous WordPress template works through sections or modules between which it is capable of dividing the content of the page and adding a design to each one.
Through this skill, you will be able to discover the way to avoid the monotony of the backgrounds of unicolored web pages or with images downloaded from the web.
Although Divi gives you the possibility to design your own page, if you wish, you can download the pre-established designs.
For this reason, we explain how to create this peculiar 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 to be the largest sections within the Divi constructor.
They have the characteristic of stacking to classify the content that will be entered in the website design, so it can be considered as the ” wrapper “.
Among the settings that these blocks contain, it is available to add a background with an animated gradient manually within the ” Design Options “.
Steps to create a section block and access its settings
After making sure that you have activated the Divi visual builder, you must click on the colored “ + ” button to add the section. Then it will show you a window that will allow you to add three types of options: ” Standard “, ” Full width ” and ” Special “.
Once you have selected any of these, you will have the possibility to choose the column structure for the rows that the section will contain.
Finally, you will be able to insert modules and the option ” Section Settings ” will appear, where you will see the list of modifications for ” Content “, ” Design ” and ” Advanced “.
How to add an animated gradient background with Divi? Step by Step
The method to be used is to create the gradient background you want by adjusting the background that contains the Divi constructor along with CSS snippets. So, start by creating a new page on the WordPress platform and use the Divi builder to choose the ” Build from scratch ” option.
Before you you will have a blank canvas. Here you will add a single column row as explained above.
Within the configuration of the section you must configure the content of ” Padding ” to 12vw top and add ” Height: 40vw ” in the gray box that appears under ” Main CSS elements “.
From this point you will begin to configure the gradient background, where you will access the ” Background or background ” option to press the ” Gradient ” button.
Below this, you can choose the colors of the gradients, the type of gradient you want, and the direction it should take.
When doing this, resize your block to 100% width and height to start creating the animation you want.
This will be done through custom CSS editing, so you must add a class that is specific to the section you are editing; therefore, you must enter the ” Advanced ” tab and place the animation name under ” CSS Class “.
Code to add animated background in Divi
Once this class is added, you can add the code module and place the following inside the ” Code ” box inside the <style> </style> tags.
. cheer up-gradient {
Background-size: 400% 400%;
Animation: gradient 5s ease infinite;
}
@keyframes gradient {
0% {
Background-position: 0% 50%;
}
fifty% {
Background-position: 100% 50%;
}
100% {
Background-position: 0% 50%;
}
}
In this way you have managed to set your gradient background at an amplitude of 400% in relation to the original size, and its animation is a movement to both sides.
In addition to the design advantages that Divi offers you, it also has many tools to make your page the favorite among Internet users, such as being able to use BreadCrumbs to improve the SEO of the page or insert a drop-down menu for its use and handling is easier.