Documentation
Custom Background
Functionality Description
The Custom Background option was created to provide you with the ability to create advanced background styles for inner components of the modules otherwise not available by default through the Elegant API or by default on the Divi Visual Builder. With this lightweight and efficient enhancement, you will be able to take your designs to the next level without using a single line of code.
Similar to the standard Background options included by default on the Divi Visual Builder, this Custom Background is composed of 3 options that can be combined to achieve amazing results:
- Background Color.
- Background Gradient Options.
- Background Image.
Background Color
The Background Color option makes use of the default Visual Builder Color Picker allowing you to use the Default Palette setup under the Divi Theme Options > General Settings.
This option will allow you to set a Solid Background Color for that specific section of the module.
Gradient Background
To make use of the Gradient Background Color, enable it using the toggle button below the Enable Gradient Background label.
This option will allow you to set a Linear or Circular Gradient Background Color for that specific section of the module.
Unfortunately, due to some Divi Builder limitations, the colors saved on the Color Pickers Default Palette under the Divi Settings are not available to use on this functionality.
After the Gradient Background Color has been ENABLED you can switch between Linear and Radial gradient by clicking the following buttons:
Linear Gradient Button Toggle
Radial Gradient Button Toggle
Both, the Linear and Radial, have a preview box right next to the settings that will allow to visualize the composition of your gradient. The following options apply both gradient types, Linear and Radial:
Gradient Color Picker
Use the circular cursor to pick the desired color:
Gradient Color Bar
Contains all Color Stops of your gradient. A Color Stop with a small white dot in the middle indicates that it is selected. To add additional Color Stops click inside the Gradient Color Bar:
Gradient Hue Bar
The Hue Bar can be used to quickly change the color of a selected Color Stop:
Gradient Opacity Bar
The Opacity Bar can be used to change the color opacity of a selected Color Stop:
STOP
Indicates the position of the selected Color Stop inside the Gradient Color Bar between 0% to 100%.
Trashcan
Select a Color Stop inside the Gradient Color Bar and click on this button to delete it.
Color Inputs
The Color Inputs can be used to manually enter the color value of a selected Color Stop:
- HEX: Enter the Hexadecimal color value without the # symbol.
- R: Enter the Red color value from 0 to 255.
- G: Enter the Green color value from 0 to 255.
- B: Enter the Blue color value from 0 to 255.
- A: Enter the Alpha/Opacity value from 0 to 100.
Linear Gradient Background
The Linear Gradient will allow you to set a linear color gradient background. The following options apply only to this gradient type:
Linear Gradient Angle
Change the number value right next to Angle Icon to set the direction of your gradient between 0° and 360°.
Radial Gradient Background
The Radial Gradient will allow you to set a circular or radial gradient background color. The following options apply only to this gradient type:
Gradial Direction
The Gradial Direction controls the position of your radial gradient background. These are the available options to choose from:
- Circle
- Top Left
- Top
- Right
- Bottom Right
- Bottom
- Bottom Left
- Left
Background Image
To make use of the Background Image options, enable it using the toggle button below the Enable Background Image label.
This option will allow you to set a background image for that specific section of the module, and the options for this setting the same way as they do for the default Visual Builder Background.
Once the Background Image has been ENABLED a new option Place Gradient Above Background Image will show up.
If this option is ENABLED, the gradient will be positioned on top of the Background Image:
Here are all the options available for the Background Image once it has been ENABLED.
- Enable Background Image: If ENABLED will allow you to set and customize the Background Image.
- Place Gradient Above Background Image: If ENABLED, the gradient will be positioned on top of background-image.
- Background Image: Upload your Background Image.
- Background Image Size: Set the Background Image Size. Choosing “Cover” will force the image to fill the entire background area, clipping the image when necessary. Choosing “Fit” will ensure that the entire image is always visible, but can result in blank spaces around the image. When set to “Actual Size,” the image will not be resized at all.
- Cover
- Fit
- Actual Size
- Stretch to Fill
- Background Image Position: Choose where you would like the background image to be positioned within this element. You may want to position the background based on the image’s focus point.
- Default
- Center
- Top
- Bottom
- Right
- Left
- Background Image Repeat: Choose how the background image should repeat within this element. If the background image is smaller than the size of the element, you may want the image to repeat. This result will result in a background image pattern.
- Repeat
- Repeat X (horizontal)
- Repeat Y (vertical)
- Repeat with space between
- Repeat and Stretch
- No Repeat
- Background Image Blend: Choose how the background image should blend with the background color of the element. Background images can be blended with the background color, merging the two and creating unique effects.
- Normal
- Multiply
- Screen
- Overlay
- Darken
- Lighten
- Color Dodge
- Color Burn
- Hard Light
- Soft Light
- Difference
- Exclusion
- Hue
- Saturation
- Color
- Luminosity
That’s it. We hope you find the Custom Background functionality valuable, and that it helps you to build incredible designs. Enjoy!
Note
Default settings, sub-settings, and options used in all Divi Builder Modules are not described or included in our documentation and they are referred as Divi Builder Default throughout our guides to indicate that the options included are those provided by default by/or in the Visual Builder. If you need help learning to work with Divi Visual Builder, please visit Elegant Themes Documentation.