How to set up and style the Background Switcher widget in Elementor.
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.
Part of: Bright Addons (free).
| Option | What it does |
|---|---|
| Items | The list of columns or rows. Each item has the fields below. |
| Background Image | The image that fills the whole widget while this item is active. |
| Title | The item title, always visible. |
| Text | A short line shown under the title. |
| Button Text | The text of the item's button. Leave it empty for no button. |
| Link | Where the button, or the whole item, leads. |
| Image Position | Which part of this image stays in view: center, top, bottom, left or right. |
| Image Size | The image size used for every background. |
| Title HTML Tag | The heading tag of the titles, from H1 to H6, div, span or p. |
| Option | What it does |
|---|---|
| Direction | Horizontal (columns) or Vertical (rows), set for desktop, tablet and phone. |
| Height | The minimum height of the widget in px, vh or em. |
| Active Item Size | How much larger the active item gets. 1 keeps all items the same size. |
| Content Position | Places the title and text at the top, middle or bottom of each item. |
| Text Alignment | Aligns the content left, center or right. |
| Option | What it does |
|---|---|
| Switch On | Hover, which also switches on tap and keyboard focus. |
| Background Effect | Fade, or Fade and Zoom, when the background changes. |
| Switch Duration (ms) | How long the change takes, from 0 to 3000 milliseconds. |
| Active Item on Load | The number of the item that is active when the page opens. |
| Keep Last Item Active | When off, the first active item comes back when the pointer leaves the widget. |
| Show Text | On the active item, always or never. |
| Show Button | On the active item, always or never. |
| Link the Whole Item | Makes the full column or row open the item link. |
Pro adds 98 widgets, 10 extensions, a Theme Builder and 32 dynamic tags, and keeps every free widget. From $10 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
border radius, border, box shadow, the color behind the images and an overlay color or gradient over every image.
padding, divider color and width between items, and a background color and blur for the active item.
typography, color, active color, text shadow and spacing.
color, typography, spacing and max width.
typography, padding, border radius and normal and hover colors.
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.
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.
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.
The image of the item active on load loads first. The others load lazily, so they do not slow down the first view.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guideYearly and lifetime plans. Use this code at checkout:
14-day money-back guarantee. Ends Monday 30 November at 23:59.