# Inspector panel

The Inspector Panel is the control center of your elements. 

You can use the Inspector Panel to edit your element in terms of: ***General Settings***, ***Design***, and ***Animations***.

It provides a comprehensive overview of the selected element on your page, including its properties, styles, and layout settings.

## Open the Inspector panel

{% hint style="success" %}
**Steps:**

1. Click on the element you want to edit
2. The Inspector Panel shows the design details specific to that element
   {% endhint %}

<figure><img src="/files/mlSp6RnWuj3rtt2F83qs" alt=""><figcaption></figcaption></figure>

## Use the Inspector Panel

The Inspector Panel shows design details, such as size, position, and paddings/ margins.&#x20;

You can adjust these values directly in the panel to edit the element's appearance and adapt it to different screen sizes.

### General

Access the general settings of the element. The available settings will be varied depending on the selected element type.&#x20;

Some common settings are:

* **Size**: Set the width and height of the element.
* **Constraints**: Define how elements respond when you resize the browser.
* **Visibility**: Set the element to whether show or hide on one more more particular views (desktop/ tablet/ mobile).
* **Attributes**: For those with advanced coding skills, the Attributes field offers granular control over element customization. Add custom IDs or class names to elements to apply specific CSS styles, tailoring the look and feel precisely to your vision.

<figure><img src="/files/m765tox2EWvZcwH8RrVN" alt=""><figcaption><p>An example of General settings for a Text element</p></figcaption></figure>

### Design

The Design tab is where you change your element's look, spacing, and so on. The available settings will be varied depending on the selected element type.&#x20;

Some common settings are:

* **Spacing**: Adjust the spacing (padding and margin) of the element.
* **Backgrounds**: Set background to the theme either with a color or a media. If a color and a media are set as the background of an element at the same time, it will prioritize the media.
* **Borders**: Apply a border to the element and define the border radius value.
* **Effects**: Enable/ disable the box shadow to make the element stand out.

<figure><img src="/files/ujJ53EEqFwTJq8D5ZlJV" alt=""><figcaption><p>An example of Design settings for a Text element</p></figcaption></figure>

### Animations

Captivate visitors' attention by adding striking visual effects to elements:

* **Entrance** animation
* **Hover** animation
* **Click** animation.

<figure><img src="/files/pKa22eJYB4Oxa4d1nsEN" alt=""><figcaption></figcaption></figure>

*See more:*&#x20;

{% content-ref url="/pages/7gnm1vqOxYHR0d2x5dym" %}
[Animations](/foxify-app/foxstudio/layout-and-styling/animations.md)
{% endcontent-ref %}


---

# Agent Instructions: 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://docs.foxecom.com/foxify-app/foxstudio/editor-tools/inspector-panel.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.