Looking for a guide on how to Colors, Images, and Videos using the Divi Page Builder in WordPress? We provide a detailed tutorial that guides you through everything—from changing colors to uploading videos to your Divi background, all without needing to use custom CSS. You’ll be guided step-by-step on how to fully utilize Divi’s modules to achieve your desired background design. Follow us through to the end as we guarantee you’ll learn easily without encountering any issues. And if any challenges arise while applying settings to your website’s background, we’ll address them and show you how to solve them effortlessly.
Opening a Page in Divi Page Builder
Starting from the WordPress dashboard, first click on Divi, then click on Theme Builder to open the Divi Theme Builder. There’s also another way to access the page where you want to modify the background settings—simply go to the Site View, find the page, and click on it. Once the page is open, click on the Enable Page Builder button at the top. For this example, we’re going to open the page through the Page Builder to change the Homepage background color. So, click on the Home Page Global Body edit button, as shown in the screenshot below. Your page will soon open in the Divi Page Builder, ready for editing.
Read More: A Look at Divi’s New Global Color System
How to Add Background Color to the Page Section
In this step, we’ll guide you through adding a color to your website’s page section. First, click on the Section Settings, then go to the Content Tab Setting. Scroll down until you find the Background option and click on it. Once the Background Settings are open, you’ll see various color options. Choose your favorite color—just as we applied blue in the screenshots below. The color can be easily added with a single click.
Read More: How To Apply A Blur and Filter Effects To Divi Section Background Image
How to Change Background Color
In this step, we will demonstrate how to change the background color. Start by clicking on the Section Settings button again, then select the Background Setting option. You’ll notice that the current color is blue, but we want to change it to red as shown in the screenshot below. Once we apply the red color, the background will immediately change. In the next step, we’ll show you how to modify the Gradient Color.
Read More: How to Make Gradient Text in Divi Without Code
How to Apply a Gradient to the Background Color
After changing the background color, there is another option called Gradient, where you can combine multiple colors to make your website’s background more attractive and visually appealing. To apply this, click on the Gradient option in the background settings, as shown in the image below, and select two colors. Next, scroll to the Gradient Type option and choose the one that suits your preference. The following setting is Start Position, which controls where the gradient begins—experiment with the options to see the effect in action. After that, you’ll find the End Position option, which controls where the gradient ends. Finally, the most interesting feature is the Place Gradient Above Background Image button. This allows the gradient to overlay the background image, changing the color of the image by applying the gradient effect.
Read More: Design Image Galleries with Divi: Step-by-Step Guide
How to Add or Change a Background Image
In this step, we’ll explore another option—the Background Image. We’ll show you how to change or add a background image to your page. First, go to the Background Settings section as described earlier, and click on the third option, as shown in the image below. Then, click on Images and upload your preferred image, which will appear as your background. The next option in the Background Image settings is Use Parallax Effect. With Divi, applying the Parallax Effect to any background image in a section, row, column, or module is simple. Just enable the Parallax Effect by selecting “YES” and then choose your preferred Parallax Method—either CSS or True Parallax.
Read More: 7 Unique Ways to Add Hover Effects to Divi
How to Add Video to Your Background
Setting a video as a background using Divi is straightforward and can create a visually stunning effect. To do this, navigate to the fourth option in the Background Settings, as shown in the screenshot below. Click on the Video Icon Button, and the video upload option will appear, similar to uploading an image. Select the particular video you want to use as your background.
If you scroll down in the Video Options, you will find additional settings. One option is the Background Video Format. Using WebM files can help reduce file sizes, conserving server space and improving compression. However, since not all browsers and devices support WebM, uploading an MP4 version ensures compatibility across all platforms.
Read More: How to Set Up and Style Slider Module in Divi: A Step-by-Step Guide
Conclusion
In this tutorial, we’ve explored how to effectively manage and customize backgrounds using the Divi. From changing background colors and adding gradients to incorporating images and videos, Divi’s features provide endless possibilities for creating visually engaging websites. By following these steps, you can enhance your site’s aesthetic appeal without needing to dive into custom CSS. If you encounter any challenges or difficulties with Divi, feel free to ask in the comments. Whether it’s related to the Divi background or any other issue, we’re here to assist and provide solutions.
0 Comments