1. Home
  2. Docs
  3. Lagoon
  4. Pages Elements
  5. Pulsating Background Circles

Pulsating Background Circles

One of our favorite created background effects used in Lagoon is that of the pulsating circles.

You may change the color and width of each circle individually quite easily, but simply adding a small piece of CSS code into the page’s Custom CSS section.

Each of the 3 circles has one specific CSS class which we can use to alter its appearance. The classes are:

  • pulse-bg1
  • pulse-bg2
  • pulse-bg3

If you wish to change the color and width of a specific circle, you may do so in the following way:

Open your page’s Custom CSS settings, found under the Divi page settings, and add the following code to it:

.pulse-bg1 { border: 2px solid #1020bd; }

In this example, the first circle will have a width of 2px and a bluish color. If you wish to make it thicker, simply change the 2px to a higher number (e.g. 10px). To change the color, change the current color hex code to another.

Was this article helpful to you? Yes No

How can we help?