Tutorials

How to add an animated gradient background to a section in Divi

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.

Therefore, 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 being stacked 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 ensuring 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 “.

original divi interface

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 that will 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 ” 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.

By doing this, resize your block to 100% width and height to start creating the animation you want.

divi icon with waves

This will be done through a custom CSS edit, 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 a 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button