Page Editor – Element Inspector
Last updated
Was this helpful?
English 🇺🇸
Last updated
Was this helpful?
The 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 Tab)
(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.
You can find the Element Inspector in the right column by clicking on the element you want to configure.
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.
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
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
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.
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.
For more in-depth information, watch the video tutorial provided.
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.
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.
For a more detailed guide, visit .
For more in-depth information, see .
