Add Background Images or Videos

Adding background images or videos in Elementor while using a Template Kit can make your design visually appealing and dynamic. Here’s how to do it:

1. Open the Elementor Editor

• Go to your WordPress Dashboard.
  
• Navigate to Pages > Edit with Elementor on the page where you want to add a background.

2. Select the Section

• Hover over the section where you want to add the background.
  
• Click the Edit Section icon (six dots at the top of the section).

3. Access Background Settings

• In the left panel, click the Style tab.
  This is where you can configure background images, videos, or colors.

4. Add a Background Image

• Under the Background Type section, click the Classic option.

• Click the + button to upload an image or choose one from your Media Library.

• Adjust settings:
  • Position: Defines the placement of the image (e.g., Center Center, Top Right).
    
  • Attachment: Choose Fixed for a parallax effect or Scroll for normal behavior.
    
  • Repeat: Select No-Repeat for a single image or Repeat to tile it.
    
  • Size: Choose Cover to fit the section or Contain to fit the image within the section.

5. Add a Background Video

• Under the Background Type section, click the Video option.

• Enter the URL of the video (YouTube, Vimeo, or self-hosted) or upload your video file.
  
• Adjust settings:
  • Start/End Time: Set specific timestamps for the video playback.
    
  • Play on Mobile: Enable or disable video playback on mobile devices.
    
  • Background Fallback: Upload a fallback image for mobile or slow connections.

6. Overlay the Background

• If you want to overlay the background, go to the Background Overlay section under the Style tab.

• Choose Classic or Gradient as the overlay type.
  
• Adjust the opacity, blend mode, or gradient direction for a balanced look.

7. Make It Responsive

• Switch to Responsive Mode by clicking the device icons (Desktop, Tablet, Mobile) in the top toolbar.

• Test how the background appears on different devices. Adjust the settings for optimal viewing on all screens.

8. Preview and Save

• Click the Preview Changes button to check the background’s appearance on the live site.
  
• If everything looks good, click Update to save your changes.

Tips for Best Results:

• Use high-quality images (optimized for web) to ensure fast loading times.
  
• For videos, keep the file size small or use external hosting platforms like YouTube or Vimeo.
  
• Match the background style with the Template Kit design to maintain consistency.

By following these steps, you can easily add stunning background images or videos to elevate your page design in Elementor!