Completely Free Course

Or log in with email below...

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

or

By signing up to create an account I accept LaunchParty’s Terms of Use and Privacy Policy. This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Already Registered? Log In Here

Day 3: Improve Your Design

How To Add Background Images And Overlays In Elementor

Action Plan

Step 1: Add Background Images With Overlays


Complete The Following Tasks

Visit BeFunky to edit your background photo.
In the left-hand menu, click Crop and choose a 16:9 Aspect Ratio.
In the left-hand menu, click Resize and choose a width of 1920 pixels.
In the left-hand menu, click Color and reduce the saturation (optional).
Reducing the saturation can help mute the colors of a photo that might clash with your color scheme.
Reduce the quality of the image to at least 50% and click Save.
Learn how to add background photos to sections in Elementor.
Learn about adjusting the position and size settings
Learn how to make the background photo fixed (Attachment > Fixed)
Learn how to add background overlays and adjust the settings

Watch Our Video Tutorial

Step 2: Add Repeating Background Patterns With Overlays Using Patterncooler


Complete The Following Tasks

Visit Patterncooler (or a similar site) and download a background pattern.
After selecting a pattern, go to Edit > Color theme generator and set the Saturation to zero to make it black and white.
Select one of the newly converted black and white patterns and click the Downloads Options button and download the pattern in PNG format.
Compress your PNG file using TinyPNG to reduce the file size.
Learn how to add your new background pattern to sections in Elementor.
You Earned A Badge!

Watch Our Video Tutorial

Continue To The Next Tutorial Below

Day 3

Improve Your Design

Your Progress
0

How Can This Be Free?

All of our tutorials are supported by the small affiliate commission we receive when you purchase SiteGround Hosting and Elementor Pro. We are not associated with SiteGround or Elementor in any way.