Page Editor - Element Inspector

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

element inspector

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

element inspector 1

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

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.

You can check the video below about the margin and padding

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

element inspector 3
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.

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?

Try out all PageFly features with Free plan
Don’t have Shopify store yet? Create store

PageFly Help Center is now available in French, Portuguese and Chinese.Please check the flags on the page header.

I got it!