> 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.                  |


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://documentation.peacefulqode.co.in/elementzplus-addons/widgets.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.