WordPress Elementor Background Changer Plugin

Elementor Background Changer is a plugin to change the background of specified elements on Elementor pages. It allows for custom background colors, rotating images, animations, and other styling options.

## Demo https://azmanagedit.net/services/sandbox-background/

## Description

The Elementor Background Changer plugin enables you to dynamically change the background of any HTML element on your website by specifying an element selector. It supports multiple configurations, including:

– Rotating images as background with custom intervals
– Background color rotation with intervals
– Image fit options (cover, contain, fit, etc.)
– Animation types (fade, slide, zoom, blur)

The plugin adds a simple admin interface to manage these background changers and integrates seamlessly with Elementor.

## Installation

1. **Upload the Plugin**: Upload the plugin files to the `/wp-content/plugins/elementor-bg-changer` directory or install the plugin through the WordPress plugins screen directly.
2. **Activate the Plugin**: Activate the plugin through the ‘Plugins’ screen in WordPress.
3. **Setup Background Changer**: Navigate to `BG Changer` in the WordPress admin menu to set up your custom backgrounds.

## Usage

1. **Add New Background Changer**:
– Go to `BG Changer` in the WordPress admin menu.
– Click on `Add New Background Changer`.
– Fill in the form fields:
– **Element Selector**: The CSS selector for the element you want to style.
– **Background Colors**: Comma-separated color values for rotation (optional).
– **Background Images**: Comma-separated image URLs for rotation (optional).
– **Image Change Interval**: Time in milliseconds to change images (if multiple images).
– **Color Change Interval**: Time in milliseconds to change colors (if multiple colors).
– **Image Fit**: Specify how the background image should fit (cover, contain, etc.).
– **Animation Type**: Choose the transition animation between background changes.

2. **Edit or Delete a Background Changer**:
– In the `Existing Background Changers` section, click `Edit` or `Delete` next to any changer to modify or remove it.

## Features

– **Custom Background Colors**: Rotate multiple colors as a background.
– **Rotating Background Images**: Set multiple images to rotate with customizable intervals.
– **Animation Effects**: Smooth transitions between backgrounds using fade, slide, zoom, or blur animations.
– **Easy Integration**: Works seamlessly with Elementor without custom coding.
– **Admin Panel**: Manage background changers from an intuitive admin page.

## Screenshots

1. **Admin Panel** – Add and edit background changers with ease.
2. **Frontend Example** – Rotating background colors and images with animations.

## Frequently Asked Questions

### How do I find the correct selector for my element?
To target a specific element, use the CSS selector for that element. For example:
– For an element with ID `#my-element`, use `#my-element`.
– For an element with class `.my-class`, use `.my-class`.

### Can I use both colors and images for the background changer?
Yes, you can specify both colors and images. The plugin will rotate through the colors if no images are provided, and through the images if provided.

### Does this plugin work only with Elementor?
While designed for Elementor, this plugin can target any HTML element on your WordPress site using the specified CSS selectors.

## Changelog

### 2.1
– Added support for animation effects.
– Improved admin UI with color picker and media selector.

### 2.0
– Added image fit options.
– Enhanced database management and performance improvements.

### 1.0
– Initial release with color and image rotation features.

elementor-bg-changer/ # Root directory of the plugin
│
├── elementor-bg-changer.php # Main plugin file (handles plugin registration, hooks, enqueues scripts)
├── db-install.php # Database installation file (handles table creation and deletion on activation/deactivation)
├── admin-page.php # Admin page file (contains the settings page UI and logic)
│
├── assets/ # Folder for assets (CSS, JavaScript, images)
│ ├── css/
│ │ ├── ebc.css # Frontend-specific CSS for background transitions
│ │ └── admin.css # Admin-specific CSS for the settings page
│ │
│ ├── js/
│ │ ├── ebc.js # Frontend-specific JavaScript (handles background changes)
│ │ └── admin.js # Admin-specific JavaScript (handles color picker, media selector, etc.)
│ │
│ └── images/ # Folder for any plugin-specific images (icons, thumbnails)
│
├── includes/ # Folder for additional PHP includes (optional, for modularity)
│ └── helpers.php # Helper functions file (contains reusable functions, optional)
│
├── README.md # Documentation file for the plugin, includes installation, usage, etc.
└── languages/ # Folder for language files (translations)
└── elementor-bg-changer