Completely Free Course

Connect with Facebook

or

Forgot my password

Reset Your Password

Enter your email address below. We'll look for your account and send you a password reset email.

Don't Have An Account? Sign Up Free

Completely Free Course

Connect with Facebook

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy.

Already Registered? Log In Here

Module 2: Customize The Design

How To Add Background Images And Overlays In Elementor

Action Plan

Step 1: Add Background Images With Overlays


Watch Our Video Tutorial For This Step

This video will walk you through how to add background images in Elementor. We will start with our recommended background image size, cropping aspect ratio, and photo effects using the BeFunky photo editor. Then we will discuss our recommended background image settings and background overlay settings in Elementor.

Video Summary

  • Visit BeFunky
  • Crop your background photo using an aspect ratio of 16:9 (0:58)
  • Resize your background photo using a width of 1600 pixels (1:30)
  • Change the background photo to black and white when using background overlays (1:50)
  • Add other effects such as vignette, blurred edges, and full blur (2:23)
  • Save and compress the background photo (3:13)
  • Add your background photo to a section in Elementor (3:58)
  • Adjust the background photo position (4:25)
  • Change the background photo to “Fixed” so that it stays stationary while scrolling (4:53)
  • Use the “Cover” setting to stretch the background photo to the entire section (5:20)
  • Add a gradient overlay (5:40)
  • Adjust the opacity using a value between 0.7 – 0.9 (6:05)
  • Adjust the gradient angle (6:35)
  • Choose between “Linear” and “Radial” gradient (6:45)
  • Use the location bars to adjust the gradient (6:52)

(I added a background image with overlay in Elementor)

Step 2: Add Repeating Background Patterns With Overlays Using Patterncooler


Visit Patterncooler

Patterncooler is our favorite website for finding cool patterns and textures for repeating backgrounds.

Watch Our Video Tutorial For This Step

This video will walk you through how to use Patterncooler to find patterns and textures, use BeFunky to convert your patters to black and white, and then create a repeating background in Elementor.

Video Summary

  • Visit Patterncooler
  • Go to Styles > Simple (0:26)
  • We will convert the pattern to black and white before adding it to Elementor (0:40)
  • Click the circle in the middle to remove or change the texture (1:05)
  • Go to “Edit Colors” and click the “Shuffle” button to adjust the pattern (1:25)
  • Click “Download Options” and download the image in PNG format (1:55)
  • Visit BeFunky (2:36)
  • Go to Effect > Black & White > Black & White 1 and click “Apply” (2:51)
  • Save the image as PNG (3:10)
  • Visit TinyPNG to compress the PNG image (3:37)
  • Add the new pattern image to a section in Elementor (4:13)
  • Make sure Position, Attachment, Repeat, and Size are all set to “Default” (4:50)
  • Click “Background Overlay” to adjust the overlay settings (5:13)
  • Adjust the opacity (5:20)
  • Chang the “Type” to be “Radial” and adjust the two “Location” settings (5:34)

(I added a background pattern with overlay in Elementor)

Continue To The Next Tutorial Below

Module 2

Customize The Design

Module 2 Progress
0

Your Achievements

You have earned 0 badges

How Can This Course Be Free?

Our course is 100% free forever because of our special partnerships with SiteGround Hosting and Elementor Pro.