How to Use Element Inspector in PageFly Page Editor

In this article, you’ll learn about the Element Inspector that you’ll see whenever you work on the settings of any PageFly element.

1. About Element Inspector

Element Inspector board allows you to configure an element’s settings. You can find the Inspector in the right column by clicking on the element you want to configure.

There are 3 components of the element inspector:

  • General” and “Styling” tabs
  • Element’s parameters search
  • View documentation button

2. “General” and “Styling” tabs

  • The General tab contains specific parameters of the selected element.
  • The Styling tab contains common styling parameters shared by all elements.

2.1. Collapsible parameter’s panel

You can show or hide the sections you want with this collapsible parameter’s panel function. This can make the editing easier and you can focus on the sections while you are editing.

For additional details about padding and margin, we encourage you to view this video tutorial:

2.2. Device selector

By clicking on this device selector, you can see how the elements display on every device: laptop, tablet, and mobile. The below example with the Product Image element will describe this function.

The video below lets you know to show/hide images across different devices:

2.3. More Settings Button

Depending on the element you choose, many sections in the General and Styling tabs have this More Settings button. This button provides users more advanced editing options. An example with the More Settings button in the TYPOGRAPHY parameter below.

2.4. Parameter reset of the padding and margin

You can reset parameter values for all devices by clicking on the parameter reset of the padding and margin button.

For instance, reset the padding and margin of the below image. The image was set up with 50 px of padding for 4 sides; 100 px of margin for the left side. When you click the parameter reset button, they all come back to the original 0 px for padding and margin.

You can check the video below about the margin and padding

3. Element’s Parameters Search

This function allows you to search for a parameter by name and whether it’s located in the General or Styling tab.

For example, enter the “Color” keyword and the result will show the Overall, Background, and the Border in the Styling tab, which is related to the Color.

The Background Color is displayed while you search the “Color” keyword because when you click to style for the background of your section, then there is a Background Color option that appears to let you choose the color for the background.

4. View documentation

When you choose an element in the page editor, then click on this button, you will go to the PageFly Help Center which has related articles for the element you chose.

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us