PageFly - Element Inspector

1571 views Linh 2

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

About The 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

“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.

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.

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.

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.

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.

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 Background Color and the Border Style in the Styling tab, which is related to the Color parameter.
The Border Style is displayed while you search the “Color” keyword because when you click to choose the border style for an image, then there is a Border Color option that appears to let you choose the color for the border.

View documentation


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

Was this helpful?