> For the complete documentation index, see [llms.txt](https://documentation.peacefulqode.co.in/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.peacefulqode.co.in/elementzplus-addons/widgets.md).

# 🧱 Widgets

## Widget Management

The **Widget Management Dashboard** lets you control which widgets are active on your site.

This feature helps improve performance by loading only what you need.

***

#### 🔧 How to Enable or Disable Widgets

1. Go to **Dashboard → PQ Addons → Widgets**
2. You’ll see a list of all available widgets (e.g., Advanced Heading, Pricing Table, Counter, etc.)
3. Use the toggle switch next to each widget:
   * ✅ **Enabled:** The widget appears in Elementor
   * 🚫 **Disabled:** The widget will not appear in Elementor, and its assets won’t load

Changes are saved automatically.

***

#### 🧩 Why Disable Widgets?

* To **reduce page load time**
* To **declutter** the Elementor editor
* To **avoid conflicts** with other addons

***

## 🎨 Custom CSS & JS

The **Custom CSS & JS** tabs let you easily add your own code site-wide without editing theme files.

***

#### 💅 Add Custom CSS

1. Go to **Dashboard → PQ Addons → Custom CSS**
2. Write your CSS in the editor (e.g.,)

   ```css
   .elementzplus-heading {
       font-family: "Poppins", sans-serif;
       color: #1e73be;
   }
   ```
3. Click **Save Changes**.\
   Your CSS will be applied globally on the frontend.

***

#### ⚡ Add Custom JavaScript

1. Go to **Dashboard → PQ Addons → Custom JS**
2. Write your script without `<script>` tags. Example:

   ```js
   document.addEventListener("DOMContentLoaded", function() {
       console.log("ElementzPlus is active!");
   });
   ```
3. Click **Save Changes**.

Your JavaScript will run globally across the site.

***

#### 🧠 Notes

* All CSS and JS are **minified and loaded optimally**.
* You can use both **jQuery** and **vanilla JavaScript** safely.
* There’s no need to edit theme files or enqueue scripts manually.

***

## 🧩 Available Widgets

Here’s a quick overview of widgets included with **ElementzPlus Addons** (example list — update as per your plugin):

| Widget Name      | Description                                     |
| ---------------- | ----------------------------------------------- |
| Advanced Heading | Create headings with dual-color and animations. |
| Image Comparison | Compare two images interactively.               |
| Counter          | Show animated statistics or milestones.         |
| Pricing Table    | Display pricing plans in an elegant layout.     |
| Info Box         | Highlight key features or services.             |
| Button           | Stylish and customizable CTA buttons.           |
| Icon Box         | Combine icons with text for visual appeal.      |

***

## 🧰 Dashboard Features Summary

| Feature                     | Description                                                   |
| --------------------------- | ------------------------------------------------------------- |
| **Widgets Tab**             | Enable/disable widgets easily with toggle switches.           |
| **Custom CSS Tab**          | Add your own CSS that applies globally.                       |
| **Custom JS Tab**           | Add custom scripts for site-wide functionality.               |
| **Version Info**            | See current plugin version and quick links to support & docs. |
| **Reset Button (optional)** | Reset widget visibility settings to default.                  |