In earlier permutations of Divi, together with a gradient overlay to a parallax background image used to be as soon as now not a built-in selection. On the other hand, with Divi’s new background possible choices (and the Gradient Builder), you’ll have the ability to merely create surprising parallax backgrounds with a lot of gradient overlay designs.

In this tutorial, we’re going to show you learn how to use Divi’s background possible choices so to upload a vibrant gradient overlay that blends with a background image the use of every True and CSS Parallax methods.

Sneak Peek

Right here’s a quick take a look on the background designs we’ll assemble in this tutorial.

This number one one has a gradient overlay with the Color combine mode used on the background image the use of the True Parallax means.

And proper right here is the same design the use of the CSS Parallax Approach. Keep in mind that the gradient remains fixed/attached to the background image so that it appears to be a part of the true image and now not just a layer.

And right here’s an example of a gradient overlay the use of semi-transparent color stops without a combine mode.

The Idea

The basic considered this design comes to 2 steps:

1. Create a background gradient for a little bit the use of the gradient builder making sure to place the gradient above the background image.

2. Add a background image to the equivalent section that uses one of the crucial parallax methods and the Color combine mode.

This will increasingly more allow the vibrant gradient to overlay the parallax image while it moves when scrolling down the internet web page. The Color combine mode merges the gradient overlay with the image for a beautiful image that looks great with parallax.

Download the Layout for FREE

To place your arms on the designs from this tutorial, you’ll first need to download it the use of the button beneath. To appreciate
get right of entry to to the download you will need to subscribe to our Divi Day-to-day e-mail document by way of the use of the form beneath. As a brand spanking new
subscriber, you’ll download a lot more Divi goodness and a free Divi Layout pack every Monday! For many who’re already on the
document, simply enter your e-mail care for beneath and click on on download. You’ll now not be “resubscribed” or download additional emails.

Obtain the Recordsdata

.et_bloom .et_bloom_optin_1 .et_bloom_form_content { background-color: #4843d2 !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container .et_bloom_form_header { background-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge .et_bloom_form_content:forward of { border-top-color: #ffffff !essential; } .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:forward of { border-top-color: transparent !essential; border-left-color: #ffffff !essential; }
@media most straightforward show and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:forward of { border-top-color: #ffffff !essential; border-left-color: transparent !essential; }.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:after { border-bottom-color: #ffffff !essential; border-left-color: transparent !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:forward of { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_1 .et_bloom_form_container form button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}

See also  6 of the Absolute best Video Codecs for 2025

Download For Free

Join the Divi Newsletter and we will e-mail you a reproduction of the ultimate Divi Landing Internet web page Layout Pack, plus tons of various superb and free Divi belongings, tips and pointers. Observe along and you’ll be a Divi grab in no time. If you’re already subscribed simply type in your e-mail care for beneath and click on on download to get right of entry to the construction pack.

DOWNLOAD

You’ve successfully subscribed. Please check out your e-mail care for to verify your subscription and get get right of entry to to free weekly Divi construction packs!

To import the section construction in your Divi Library, do the following:

1. Navigate to the Divi Library.
2. Click on at the Import button at the top of the internet web page.
3. Throughout the portability popup, make a choice the import tab
4. Choose the download document from your computer (remember to unzip the document first and use the JSON document).
5. Then click on at the import button.

Once finished, the section construction will be available inside the Divi Builder.

Let’s get to the educational, we could?

What You Need to Get Started

To get started, you will need to do the following:

1. For many who haven’t however, set up and turn on the Divi Theme.
2. Create a brand spanking new internet web page in WordPress and use the Divi Builder to edit the internet web page on the front end (visual builder).
3. Choose the selection “Assemble From Scratch”.
4. Now have a blank canvas to start designing in Divi!

The right way to Create a Parallax Image Background with a Blended Gradient Overlay in Divi

1. Create the Fill-in Row and Heading Text

Even if we’re going to be specializing in the section background design for this tutorial, it’s sensible so to upload a fill-in row and heading to get a better truly really feel for what the design will seem to be in a standard use case.

To begin out problems off, add a one-column row to the current section inside the builder.

Next, add a text module to the row/column.

Text Settings

Open the settings for the Text Module. Beneath the Content material subject material tab, add an H2 heading to the body content material subject material.

<h2>Say Hello to Divi</h2>

Beneath, the design tab, substitute the heading possible choices and max width as follows:

• Heading 2 Font: Inter
• Heading 2 Font Weight: Bold
• Heading 2 Text Color: #fff
• Heading 2 Text Size: 8vw
• Heading 2 Line Height: 1.2em
• Heading 2 Text Shadow: see screenshot
• Headding 2 Text Shadow Blur Energy: 0.28em
• Heading 2 Text Shadow Color: #10076d

• Max Width: 50%

Row Settings

Now that the heading is in place, let’s substitute the row measurement and spacing to make it further responsive.

Open the row settings. Beneath the Design tab, substitute the following:

• Width: 100%
• Max Width: 80vw

• Padding: 15vw top, 15vw bottom

2. Design the Gradient Background for the Segment

Now that the fill-in content material subject material is whole, we’re in a position to start designing our section gradient background.

Background Gradient Settings

Open the settings for the section. Beneath the Content material subject material tab, make a choice the gradient tab beneath the background possible choices and substitute the gradient possible choices as follows:

• Gradient Prevent 1: #0094ff (at 0%)
• Gradient Prevent 2: #ff00c7 (at 25%)
• Gradient Prevent 3: #0094ff (at 50%)
• Gradient Prevent 4: #ff00c7 (at 75%)
• Gradient Prevent 5: #0094ff (at 100%)

• Gradient Kind: Spherical
• Gradient Position: Bottom Left
• Place Gradient Above Background Image: YES

3. Add a Parallax Background Image with Color Combine Mode

As quickly because the gradient design is whole, we’re in a position so to upload our parallax background image. Then we will apply the Color combine mode to combine the gradient design with the background image for a beautiful parallax background design.

Background Image Settings

While inside the background possible choices of the section, make a choice the Background Image tab and upload a background image. The substitute the following:

• Use Parallax Affect: YES
• Parallax Approach: True Parallax
• Background Image Combine: Color

Why the Color Combine Mode?

The color combine mode blends a grayscale style of the image with the colors (hue and saturation) of the gradient. This preserves the visual prime quality of the image with a whole new color scheme.

4. Add a Background Mask (Why No longer?)

To finish off the design, let’s add a background mask that may take a seat down behind our heading to make the text pop just a bit further and emphasize the parallax have an effect on.

Background Mask Settings

While inside the background possible choices of the section, make a choice the Background Mask tab and substitute the following:

• Mask: Blades
• Mask Develop into: Flip Horizontal, Invert
• Mask Size: Custom designed Size
• Mask Width: 72vw
• Mask Position: Perfect Right kind

5. Add Some Temporary Scrolling Area for Checking out

Previous to we check out the whole results, we need to add some area above and beneath our section so that we have sufficient scrolling area to seem the parallax have an effect on in movement. To do this, simply add the following margin to the section:

• Margin: 80vh top, 80vh bottom

Don’t forget to remove this spacing when together with the section in your private internet web page.

Final Results

Let’s take a look at the whole consequence on a live internet web page.

And proper right here is the same design the use of the CSS Parallax Approach. Keep in mind that the gradient remains fixed/attached to the background image so that it appears to be a part of the true image and now not just a layer.

Using a Gradient Overlay without the Combine Mode

Even if I truly like the combo mode for this design, you could truly really feel the will for a further typical gradient overlay on your parallax background image.

For example, it’s very important make a selection not to add a combination mode to the design and simply give each of the gradient color stops a semi-transparent color. This may allow you to see a further subtle representation of the background image behind the gradient overlay.

To do this it’s very important raise down the opacity of each color to at least one factor like 72% and then set the background image combine selection once more to Normal.

Right here’s an example of what this is in a position to seem to be.

Take a look at Additional Gradients!

The Gradient Builder can create such a large amount of further colors and gradient types you’ll have the ability to use to make the ones layered background designs stand out. You’ll be in a position to check out our are living demos of additional background gradient design possibilities.

Final Concepts

Creating a parallax background design with a combined gradient overlay can merely be finished the use of Divi’s built-in background possible choices. It actually does give you the power of Photoshop in Divi like under no circumstances forward of. Feel free to find different color combinations with a lot of gradient color stops and positions. Plus, you’ll have the ability to experiment with different combine modes as smartly.

Expectantly, this may increasingly increasingly more turn out to be useful on your private internet website or your next mission.

I look forward to paying attention to from you inside the comments.

Cheers!

.inline-code{padding: 0px 4px; color: pink; font-family: Monaco,consolas,bitstream vera sans mono,courier new,Courier,monospace!essential} video.with-border {border-radius: 8px;box-shadow: 0 8px 60px 0 rgba(103,151,255,.11), 0 12px 90px 0 rgba(103,151,255,.11);display:block;margin: 0 auto;}

The put up The way to Create a Parallax Symbol Background with a Mixed Gradient Overlay in Divi appeared first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

read more