About Page Editor – Element Inspector
The PageFly 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 (General Tab)
- Styling 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.
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.
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.
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.
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.
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.
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.
Previous article
