BLACK FRIDAY: 50% OFF all Pro plans Code: BLACKFRIDAY50
Pro from $10 a year or $30 lifetime, no code needed: Code: BLACKFRIDAY50
Ends Cyber Monday, 30 Nov. Lock in the price today. Code: BLACKFRIDAY50
Get 50% Off
Free widget

Background Switcher Widget for Elementor Free

Titles over one big background that changes to each item's image

Overview

What Background Switcher does

Background Switcher shows several items as columns or rows over one large background. When a visitor hovers, taps or tabs to an item, the background fades to that item's image and its text and button appear. Use it for services, destinations, projects or any short list where each item has a strong photo.

Live demo

See it in action

Architectural Services

From first sketch to finished build, we plan every detail around how you live.
Learn More

Interior Design

Rooms that look calm, work hard and fit your style.
Learn More

Development Process

Clear steps, fixed milestones and one team from start to handover.
Learn More
Features

What it can do

  • Columns or rows, set per device: columns on desktop and rows on phones by default.

  • Each item has its own background image, title, text, button text and link.

  • Fade or Fade and Zoom when the background changes, with a Switch Duration in milliseconds.

  • Text and button can show on the active item only, always or never.

  • The active item can grow wider than the others with Active Item Size.

  • Choose which item is active when the page loads, and keep the last hovered item active or not.

  • Link the whole column or row, or only the button.

  • Works with the keyboard and touch screens: the first tap shows an item, the next tap opens its link.

Use cases

When to use it

Services section

Show three or four services side by side, each with a photo that fills the whole section when hovered.

Travel destinations

List places as columns and let the landscape of each one take over the background.

Project showcase

Use rows on a tall section to walk visitors through finished projects with a link to each case study.

Product categories

Point to shop categories with a big image of each and a Shop now button.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag Background Switcher onto the page.

  2. In Items, open each item and choose its Background Image, then type the Title, Text and Button Text and add a Link.

  3. Pick an Image Size and the Title HTML Tag.

  4. In Layout, choose the Direction for each device, set the Height and the Content Position.

  5. In Switching, choose the Background Effect, the Switch Duration (ms) and the Active Item on Load.

  6. Decide when to Show Text and Show Button, and turn on Link the Whole Item if the full column should be clickable.

  7. Style the box, overlay, items, title, text and button in the Style tab.

FAQ

Questions and answers

Does it work on phones?

Yes. On touch screens the first tap shows an item and its button, and the next tap follows the link. Rows are used on phones by default.

Can the background change automatically or on click?

In the free plugin the background changes on hover, tap and keyboard focus. Bright Addons Pro adds Click and Automatically to Switch On, with more background effects.

Can I hide the text until an item is active?

Yes. That is the default: Show Text and Show Button are set to On the active item. You can also show them always or never.

Are the images loaded all at once?

The image of the item active on load loads first. The others load lazily, so they do not slow down the first view.

Free forever

Background Switcher is free

It is one of 56 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.