Looking for Pinegrow V4 Documentation?

Visit our new documentation site

  • Features
  • Documentation
  • Forum
  • Blog
  • Download
Back

Tips & Tricks

Categories: Misc

A collection of useful Pinegrow tips and tricks.

Use SHIFT + Click to do a test click. In “test click” mode Pinegrow let’s page handle the click event. That’s useful for interacting with the page, for example pressing on buttons to open modals or expand menus.

Use Actions -> Edit code to edit text labels on buttons and other delicate elements. Using inline editing-mode (Actions -> Edit text or double-click) will sometimes delete the whole element if its text content is deleted.

Use Active checkbox in CSS panel to only show CSS rules that apply to the selected element (note: empty rules are not shown in this mode):

active

Use File -> Open project in new window to open a project folder in a new Pinegrow window.

Collapse elements in the tree view. Navigating and moving sections will be much easier. Use ALT + click to collapse / uncollapse all element on that level.

collapse

Right-click on elements in the page or tree to display the context menu:

contextmenu

CMD (CTRL on Win/Linux) + Click in Project and page tabs to show pages side by side:

pages

Give elements in tree custom names with Pinegrow name property in PROP:

pgname

When editing the Bootstrap carousel (slider) images using Edit code feature, the image changes but then the slider elements appear on top of each other.

Do a Page -> refresh (CMD + R on Mac, CTRL + R on Win) if page preview becomes messed-up, for example after making changes to the carousel. This will update the preview and re-run any JS code.

Disable Javascript in Page -> Javascript enabled to see how the page looks without the JS code and to speed-up the page during editing. This doesn’t affect how page runs outside of Pinegrow.

Use jQuery selectors to search the tree. For example: .myclass will find all elements with class myclass.

 



Last updated on October 19, 2016 at 2:36 pm


Print this article

Find this document useful ? Share it !
Back to Top
  • Recent Articles

    • How to change your Pinegrow subscription plan
    • How-to Renew your license to continue getting Pinegrow updates & Major upgrades
    • How to Cancel your Pinegrow subscription
    • Color the Boxes
    • Pinegrow + Atom = The Perfect IDE for the Web
    • About charging sales tax on Pinegrow purchases
    • How to Try Pinegrow for free for 7 days ?
    • Use the right jQuery version in your WordPress themes projects with Bootstrap V3.3.x
    • Countdown to Pinegrow 3.0 – A New Feature Presented Every Week
    • Experience Feedback: The relaunch of Mr. Bürli
  • Beginner’s Guides

    • Beginner’s Guides
    • Getting started with Pinegrow
    • Getting Started with Pinegrow WP
  • Editing

    • Layout
    • Elements
    • Text
    • Code
    • Javascript
    • PHP, ASP, ERB
    • Editing with Atom Editor
    • Tips & Tricks
    • More …
  • Pro Features

    • Features Overview
    • Projects
    • Master Pages
    • Components
    • Editable areas
    • Libraries
    • Partials
    • CMS
  • Blocks

    • Components
    • Editable areas
    • Build your own Blocks
    • Bootstrap Blocks
    • Bootstrap Blocks for WP
  • Helpdesk

    • What Pinegrow is and isn’t
    • Troubleshooting
    • Support Forum
    • Release notes
    • Download older versions
    • Renew your License
    • Change your subscription plan
    • Cancel your Subscription
    • Contact Us
Pinegrow Web Editor © Humane technologies LLC, Poklukarjeva 22, 1000 Ljubljana, Slovenia