How to Use Element Inspector in PageFly Page Editor

About Page Editor – Element InspectorClick to copy

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:

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

How To Access Page Editor – Element InspectorClick to copy

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 EditorClick to copy

General Tab ConfigurationClick to copy

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 ConfigurationClick to copy

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.

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 ButtonClick to copy

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.

Common CasesClick to copy

  • 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 QuestionsClick to copy

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 ResourcesClick to copy

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Great news! PageFly Help Center is now available in Japanese 🇯🇵. Explore now by switching the language in the Header section ☝️