Get a quote

Elementor Website Building Guide

Table of Contents

Getting Started

Getting Started

Setting Up Your WordPress Site

Designing with Elementor

Building Your Pages

Making Your Website Ready for the World

Keeping Your Website Healthy

Work with Images & Backgrounds

Images and backgrounds play a huge role in making your website engaging. Elementor makes it easy to insert images, set section backgrounds, and add effects like overlays or gradients.

Step 1: Adding & Editing Images

  1. Drag the Image widget into your layout.
  2. Click the placeholder → upload or select from the Media Library.
  3. Use the Content tab to:
    • Choose image size (Thumbnail, Medium, Large, Full, or Custom).
    • Set alignment (left, centre, right).
    • Add a link (to a page, file, or custom URL).
  4. Use the Style tab to:
    • Adjust width, height, opacity.
    • Add borders, border-radius (rounded corners), or box shadows.

👉 Tip: Always add Alt Text when uploading — good for SEO and accessibility.

Step 2: Section & Container Backgrounds

Instead of only using images in widgets, you can set entire sections or containers with image or colour backgrounds.

  1. Click on a Section or Container handle.
  2. Go to the Style tab → Background.
  3. Choose background type:
    • Classic → colour or image.
    • Gradient → smooth colour blend.
    • Video → background video (use sparingly).
    • Slideshow → rotating images.
  4. Adjust position, attachment (scroll or fixed), repeat, and size (cover, contain, custom).

Step 3: Using Overlays

Overlays improve text readability on top of images.

  1. Select your section/container.
  2. In Style → Background Overlay, add a solid colour or gradient.
  3. Adjust transparency so the image shows through while keeping text clear.

Step 4: Responsive Backgrounds

Images may look great on desktop but crop awkwardly on mobile. Elementor lets you set different background settings per device.

  1. Switch to Responsive Mode (bottom of sidebar).
  2. Adjust background position, size, or even use a different image for mobile.

Quick Recap

  • Use Image widgets for inline pictures.
  • Use Backgrounds for full-width visual impact.
  • Add Overlays to keep text readable.
  • Always check mobile view for cropping.

Next Tutorial

With images and backgrounds in place, the next step is Making Your Site Mobile Friendly — where we’ll fine-tune layouts for tablets and phones.