# Page Editor – Element Inspector

### About Page Editor – Element Inspector

The [PageFly Element Inspector](https://help.pagefly.io/manual/page-editor-element-inspector/) is a powerful tool in the PageFly Page Editor that allows users to precisely configure the settings of page elements. It is especially useful for customizing the look and behavior of your PagFly page without needing deep coding knowledge.

There are 4 components of the element inspector:

* [General settings](https://help.pagefly.io/manual/elements-general-settings/) (General Tab)
* [Styling settings](https://help.pagefly.io/manual/elements-style-settings/) (Styling Tab)
* Element’s parameters search
* View documentation button

In this, we will guide you how to use Element Inspector in Page Fly Page Editor effectively.

### How To Access Page Editor – Element Inspector

You can find the Element Inspector in the right column by clicking on the element you want to configure.

![](/files/6Xu1bhJK0fjoDF9Kh6CL)

### How To Configure For Element Inspector In PageFly Page Editor

#### General Tab Configuration

**General Tab** in the **PageFly Element Inspector** is crucial for configuring basic settings that affect the functionality and interactivity of your page elements. Three general settings that all PageFly elements have are:

* **Attributes**: Set a custom value for several native attributes of the element HTML code so that you can later use it in custom CSS/JS code.
* **Visibility**: This parameter is helpful if you want to hide elements in different devices.
* **Animation**: Choose the animation to apply to the element when displayed and when mouse over.

![](/files/IF9e267GyrF6OryceKyn)

Apart from the above three settings, **General** Tab also contains specific parameters of the selected element. For example, if the element is a heading, it will have these settings apart from the those three common settings:

* Heading text
* HTML tag
* Show icon
* Click action

For a more detailed guide, visit [Element General Settings](https://help.pagefly.io/manual/elements-general-settings/).

#### Styling Tab Configuration

The **Styling Tab** provides comprehensive options to customize the aesthetics of your Page Fly page’s elements with styling options:

* Typography and Alignment
* * Text font, size, style, and color
    * Text alignment options for left, center, right
* Spacing
* * Margin settings for outer spacing
    * Padding settings for inner spacing
* Backgrounds
* * Background color selection
    * Background image or video insertion
    * Parallax effect for dynamic scroll visuals
* Borders and Effects
* * Border color, width, and style
    * Drop shadows and other visual effects
* Advanced Styling: Custom CSS for detailed styling beyond the provided options

For more in-depth information, see [Element Style Settings](https://help.pagefly.io/manual/elements-style-settings/).

![](/files/zEW1tc2QzhY8UbuEtLfV)

#### Element’s Parameters Search

This feature enables quick and efficient parameter searches within the Element Inspector. For example, type a keyword like “**Color**” to see where it appears across different settings, such as in background or border styling. This facilitates faster edits and reviews.

![](/files/KP7sYDG8lK3GjbOQNIz9)

#### View Documentation Button

The **View Documentation** button connects directly to the **PageFly Help Center**, providing instant access to relevant articles and guides related to the element you are currently editing.

![](/files/Gp53kFi1jfckJjA0Fmyv)

For more in-depth information, watch the video tutorial provided.

{% embed url="<https://youtu.be/Z1J6lqVlGt4?t=217>" %}

### Common Cases

* **Responsive Design Adjustments**: Modify visibility settings for different devices to optimize layout and user experience.
* **Interactive Content Enhancement**: Apply animations to elements like buttons to enhance interactivity, triggering on load or hover.
* **Custom Branding Applications**: Use Attributes to insert specific IDs or classes for unique styles or scripts.

### Frequently Asked Questions

**1. How do I make an element visible only on mobile devices?**

Use the **Visibility** setting in the **General Tab** to select device-specific visibility options.

**2. How do I link an element to a specific page within my site?**

In the **General Tab**, use the **Click Action** setting to assign a link or action that redirects users when they interact with the element.

### Additional Resources

* [PageFly Element Styling | Ultimate Guide to Edit Effectively](https://help.pagefly.io/manual/elements-style-settings/)
* [Edit PageFly Element General Settings – General Tab Configuration](https://help.pagefly.io/manual/elements-general-settings/)


---

# 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://help.pagefly.io/page-structure-and-elements/editor/user-interface/page-editor-element-inspector.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.