Divi Plugin Highlight Divi Background Plus

Divi has a lot of background functions. You can add a solid color background, gradient, image, or video. The picture is particularly interesting because of the mix of images, where you can use color or gradient as an overlay. One problem though is that it does not work on parallax. Another problem is that the video has no overlay.

If you wanted to add overlays and parallax, you should use CSS. It works, but it must be done by hand, which means that all adjustments are done in the code, which takes longer to manage. You would not want most customers to make changes to your code. Fortunately, there is a simpler and safer way to solve this problem.

A third-party plugin called Divi Background Plus adds overlays to both. With this plugin, you can add an overlay to a video, and an overlay to a parallax image. In this article we will see Divi Background Plus and see what he can do.

You can buy the plugin from the developer's website .

Installation of Divi Background Plus

Divi Plugin Highlight: Divi Background Plus

First, unzip the downloaded file. Inside this file is a read me file and the zip file of the plugin. The read file provides me with some installation and startup instructions. Download and activate the file called divi-background-plus. No other configuration required.

Background Module Plus Divi

Divi Plugin Highlight: Divi Background Plus

A new module is added to Divi Builder called Background Plus.

Divi Plugin Highlight: Divi Background Plus

The module includes a Content tab and an Advanced tab. The Contents tab includes settings for the layout level (choose the level between the section, row or column to place the overlay) and the background (with the color, gradient, image and standard video). The Advanced tab includes standard custom CSS features.

Divi Background Plus is the overlay module that runs in the background. In other words, your background image or video is placed in the section, line, or column, and this new module adds an overlay over it. The background image where the video is located in one location and the superposition in another. If you know how to use color and gradient overlays, you already know how to create the overlays that this module will produce.

To use the Background Plus module, start by deciding where you want to place the background of the image or video. You can place it in the section, line or column. Then drop the Background Plus module into this section, row or column. In the Layout Level setting, choose the location of the background you want to target. Let's take a look.

Example of a Divi Plus image background

Divi Plugin Highlight: Divi Background Plus

Here I have placed the background image in a row. I've activated the parallax effect and I've chosen CSS as the parallax method.

Divi Plugin Highlight: Divi Background Plus

Here is the picture without the overlay. It is a parallax image that works exactly as one would expect.

Divi Plugin Highlight: Divi Background Plus

Then I dropped a Background Plus module in this column.

Divi Plugin Highlight: Divi Background Plus

In the Background Plus settings, I chose Row for the level and created a gradient background. I've changed the direction of the gradient to 118 degrees. We could also use a solid color rather than a gradient.

Divi Plugin Highlight: Divi Background Plus

We now have a superposition on a parallax background. I'm going to add some text in the overlay and we'll see that in action.

Divi Plugin Highlight: Divi Background Plus

Here are the text modules. I put them in the right column. As the Background Plus module does not display anything in its column location, it is read as if there was nothing there. I've added padding to the left side of the right row to push a little bit of the text off the left. Alternatively, I could have used one column rather than two.

Divi Plugin Highlight: Divi Background Plus

I've reduced the size of the image to keep the file size small, but you can see here that the image remains as parallax background behind the gradient and overlay text.

Divi Plugin Highlight: Divi Background Plus

You know me and my curiosity. I had to see if two Background Plus modules could affect the same background image.

Divi Plugin Highlight: Divi Background Plus

The first module uses a red gradient on the left with an opacity of 80% and a light gradient on the right. I put the start position at 8% and the end position at 33%.

Divi Plugin Highlight: Divi Background Plus

The next module uses a light gradient on the left with a blue gradient on the right at 74% opacity. He uses a starting position of 56% and a final position of 100%.

Divi Plugin Highlight: Divi Background Plus

The result is a parallax background with two overlays – one on each side of different colors without overlap in the middle. Overlays create an interesting angle.

Divi Plugin Highlight: Divi Background Plus

For this one, I changed the start and end position for the left gradient to 33%.

Divi Plugin Highlight: Divi Background Plus

I changed the start and end position of the right gradient to 87%. I also change the direction of the gradient to 72 degrees. This means that the red and blue will be asymmetrical (which could make my eyes nervous, but we will try anyway).

Divi Plugin Highlight: Divi Background Plus

The result creates a clean line so that the gradients are easier to see. This background is always in parallax. Thus, you can use two modules for the same parallax background image. I did not see any effect on the speed of the page.

Example of a Divi Plus image background

Divi Plugin Highlight: Divi Background Plus

I add a background video in a row with overlay text. Since video backgrounds do not have a parallax option natively, we can not create parallax video backgrounds even with Divi Background Plus. However, the ability to add an overlay to a video still gives us a lot of design possibilities.

Divi Plugin Highlight: Divi Background Plus

Here's a screenshot of a video background with the text. The text is difficult to read. Normally I would like to add a background behind the text, but it can be difficult to get the look you want.

Divi Plugin Highlight: Divi Background Plus

I added an overlay on the video using a solid color. I used black with an opacity of 50%.

Divi Plugin Highlight: Divi Background Plus

For this example, I created a gradient and changed the gradient type to radial with a radial center direction. The starting position is 41% and the end position is 100%. I put the first color to black with an opacity of 80%. The second color is light gray with 40% opacity.

Divi Plugin Highlight: Divi Background Plus

The result places a dark spot in the center for the text to come off.

Divi Plugin Highlight: Divi Background Plus

Now I add a red overlay. The color on the left uses an opacity of 80% while the correct color is 56%. I brought it back to linear for the type of gradient and set the direction to 162 degrees, the starting position to 42% and the end position to 75%.

Divi Plugin Highlight: Divi Background Plus

It creates a thick red with variations in the gradient.

Divi Plugin Highlight: Divi Background Plus

And of course, I had to try two Background Plus modules with video. This time, I moved the background video in the section and targeted it with a background, and then I placed another one to target the module line. of text.

Divi Plugin Highlight: Divi Background Plus

For the module that targets the section I've placed red on the left and blue on the right, both with an opacity of 70%. The direction of the gradient is 162 degrees, the starting position is 40% and the end position is 60%.

Divi Plugin Highlight: Divi Background Plus

For the module that targets the line, I have created a gradient opposite to that of the section. He uses blue on the left and red on the right, both with an opacity of 70%. The gradient direction is 158 degrees, the starting position is 0% and the end position is 100% to create a softer blend of colors. For line settings, I added 50 pixels of filler on all sides and added a box shadow.

Divi Plugin Highlight: Divi Background Plus

The result is an overlay superimposed on the background video.

Using Divi Background Plus with Extra

Divi Plugin Highlight: Divi Background Plus

All settings with Divi Background Plus are standard Divi Builder settings and it works well with Extra. Here is a screenshot of the background video of the example above. All parameters are still in place. Overlay overlay allows the background video to pass through as expected.

Divi Background Plus License and Documentation

The plugin is $ 10 and you can use it on as many sites as you want. The documentation is provided as a document in the downloaded file (although there is not really much of it) and as a video on the publishers' product page . I highly recommend watching the video as it shows the plugin in action.

End of Thoughts

Divi Background Plus opens up interesting design possibilities. It's easy to use – if you know how to use the background settings for colors, gradients, images and videos, you already have the skills to use this plugin. The only difference is that this plugin creates an overlay separately from the background. If you want to create background overlays on parallax images or videos, this plugin is worth the detour.

We want to hear from you. Have you tried Divi Background Plus? Let us know what you think in the comments.

Image of the star by Lepusinensis / shutterstock.com

Load More Related Articles
Load More By Amit Ghosh
Load More In WordPress Plugins

Leave a Reply

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