Using Background Images and Gradient Overlays

They key to a professional appearance on your WordPress site can be found in your images. Often times, users post images that are bad, blurry, or just plain boring. Here, I will show you how to use Divi’s background overlays and settings to spice up the images on your site. There are tons of options to tweak your image to perfection, but in this scenario, we will be adding gradients to the header image and blurbs. This concept can be easily replicated on other elements too! For the purpose of this demonstration, we will be creating an artist’s website with these advanced elements.

Creating the Layout

1. Start by creating a new page and setting the title
2. Next, we are going to create a Standard Section with a Fullwidth Row
3. Delete the original section that WordPress creates for you
4. Add a text module – this will be the title
5. Optionally, you can also create another text module to act as the subtitle directly below the title
6. You can also add any other elements you wish, but remember to not make this section too busy, as it will be hard to visualize the image behind your elements
7. Then, add another Standard Section with another Fullwidth Row
8. Add a Text Module here
9. Next, add another Standard Section with a three column layout
10. Here, we will create a single Blurb module (that we will later duplicate to the other columns)
11. Done!

Now that we have created the initial layout, we can now go back through and tweak all of the settings to achieve our goals. This is what your page should look like at this point:

Creating the Gradient Overlay on the Header Image

1. Edit the first Standard Section by clicking the three horizontal lines in the top left corner of the Section
2. Here, we are going to first add the image by clicking on the picture icon, and uploading our image
3. After your image is added, click the gradient tab so we can configure the gradient overlay
4. Here, we will set the gradient that will overlay the image by clicking the + and selecting our two colors
5. You can also select the type of gradient you want by changing the dropdowns and sliders, but for this example I am going to use a Linear gradient
6. You also need to toggle the switch under the section that reads Place Gradient Above Background Image
7. When you finish configuring your gradient settings, go back to the image tab and change the Background Image Blend to Multiply – You should now be able to preview your changes
8. Click Save & Exit
9. Done!

Your finished product should look something like this:

Adding Elements to the Featured Image

1. To add a title that will overlay on your image, we are going to edit the first Text Module we have.
   
2. In the content text box, type your title
3. Switch to the Design tab and begin tweaking your design – for example, I am going to choose these settings:

   • Text Color: light

   • Font Size: 42px

   • Text Shadow: bottom left option

   • Text Orientation: centered

     

4. Click Save & Exit
5. Edit the subtitle Text Module next
   
6. Type your subtitle in the Content text box
7. Switch to the Design tab and begin tweaking your design – for example, I am going to choose these settings:

   • Text Color: light

   • Text Letter Spacing: 5px

   • Text Shadow: bottom left option

   • Text Orientation: centered

8. Click Save & Exit
9. Lastly, we are going to configure our Button Module by clicking the edit button
   
10. Enter your text and the URL you want to send people to when they click the button – I set mine to open in a new tab
    
11. Switch to the Design tab and toggle the slider that says Use Custom Styles for Button
12. Begin tweaking your design – for example, I am going to choose these settings:

    • Button Alignment: centered

    • Text Color: Light

    • Button Text Color: #ffffff

    • Show Button Icon: no

13. Click Save & Exit
14. Done!

Configuring the Text Box

1. Edit the Text Module and fill in the Content text box with the desired information
   
2. Click Save & Exit
3. Done!

Configuring the Blurb Modules

1. Click edit on your Blurb Module
   
2. Set the Title – for this example I will be linking to different music services
3. Set the Description in the Content text box
4. You can also add a URL to link to if desired
   
5. Toggle the Use Icon slider and select an icon to display at the top of your blurb
   
6. Next, click on the image pane and upload your image – I got mine from Toptal.com
7. If your image is repeating like mine, make sure you change the Background Image Size to Actual Size and the Background Image Repeat to Repeat
8. Make sure that Background Image Blend is set to Multiply
   
9. Now, click the gradient tab and configure your gradient – remember to toggle the Place Gradient Above Background Image slider to yes
   
10. Switch to the Design tab and begin tweaking your design – for example, I am going to choose these settings:

    • Icon Color: #282828

    • Circle Icon: Yes

    • Circle Color: transparent

    • Show Circle Border: Yes

    • Circle Border Color: #282828

    • Image/Icon Placement: Top

    • Text Orientation: centered

    • Title Text Alignment: centered

    • Body Text Alignment: left

    • Custom Padding: 15px on all

    • Rounded Corners: 20px on all

    • Border Width: 3px

    • Border Color: #282828

    • Box Shadow: 1st option

11. Click Save & Exit
12. You can now duplicate this module twice and move it to the two other columns – this will ensure the exact same design settings will be used on all three
    
13. Now we can edit the new duplications, and change the icons, titles, URLs, and descriptions of each
14. Done!

If you have followed all of these directions exactly, your Divi Builder page should look like this:

And your site should look close to this:

We hope you have enjoyed learning about this newly updated feature and were able to successfully replicate this on your own site. If you have any questions, please do not hesitate to contact us.