PageFly - Element Inspector

81 views Anh 0

In this article, you will learn about the Element Inspector which you will 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 tabs to customize your element: General, Styling, and Advanced.

Important: the settings in General tab will be varied depending on the element you are working on while it is almost the same when it comes to the settings in Styling and Advanced tab.

Where Element Inspector located

General tab

The General tab allows you to control the settings of the element. For each element, there are unique settings. Below is the demonstration of General settings in Image element and Paragraph element.

Image element

General tab of Image element General consists of content, action and tracking sections.

  1. CONTENT:  settings for adjusting Image Alt Text, Title Text,  alignment and other settings.
  2. ACTION:  
  • Click Action: 3 options (None, Open lightbox, Open URL)
  • Go to URL: input the link destination and set the action to Self or New
    • Self: loads the website in the current tab
    • New: loads the website in a new tab
  1. Tracking:  gives you the ability to fire events to Google Analytics or Facebook Pixel.

Paragraph element

General tab of Paragraph element As you can see the settings in this element is really simple. Under CONTENT, we find:

  • Text: where you input in the content
  • Dropcap option

Add To Cart button element

The Add To Cart button has:

  • SETTINGS
    • Product: Select a product to display
    • Button Text: the text displayed on the button.
    • Redirect to Checkout option: this allows your clients to be directed to Checkout page when the button was clicked
    • Enable Ajax: this allows the cart to be updated automatically after Add to Cart button got clicked without redirecting to Cart Page.
  • TRACKING
    • Google Analytics: this allows you to keep track of the events taking on your page with Google Analytics.
    • Pixel Event: similarly to Google Analytics, this lets you work with Facebook Pixel on your page.

Styling tab

The Styling tab gives you the control of the element styling such as Text, Background, Box Styles, Border, Display and Custom CSS. Depending on the element you would see 4 styling sections or some of them.

In our example, we take the paragraph element.

  1. TEXT:   customize the Text Font Family, Font Size, Weight and other options.
  2. BACKGROUND:  customize the background color of the selected element with the convenient Color Picker or use the image.
  3. BOX STYLES:  adjust the element’s dimension, margin and padding value.
  4. BORDER:  apply the border style (Solid, Dotted or Dashed) and its radius value.
  5. DISPLAY: manage the element arrangement via CSS display options Inline, Block or Flex.
  6. CUSTOM CSS:  add custom CSS code to customize the styling of the element.

Important: The settings in Styling tab are unique for each device whether you using Desktop, Laptop, Tablet or Mobile. To edit the styling for the specific device just use the Device Switcher to switch preview mode like the image below.

Advanced tab (paid plans)

This tab allows you to control the element attributes, animation and the display on specific devices (desktop, laptop, tablet and mobile). The advanced tab settings section applies to all elements in the PageFly app.

Advanced tab of all elements
  1. ATTRIBUTES – assign the unique CSS Attribute ID or Class to the element so that the element could be customized using Custom CSS code correctly.
  2. ANIMATION – control two types including Scroll Down and Mouse Over behavior.
  3. HIDE ON – hide the element on the specific devices (Desktop, Laptop, Tablet, Mobile).