Challenges for new Pinegrow users

Pinegrow is clearly a professional design environment with a very powerful UI. I do appreciate the utility of the package and (after a lot of experimentation) I like using it. But it has an exceptionally high learning curve. Some specific issues I had were:

  1. It is difficult to understand which of the multiple UI views (Properties, Visual Editor, and Code Editor) contains the controls that you need. Tutorials sometimes seem to dip straight into the use of a control without always making it clear which view they are in - I spent a lot of time trying to work this out. Tutorials also use PUG which is incomprehensible to a newbie. At least, give us a link to a PUG syntax explanation on the tutorial page!
  2. Pinegrow seems to make the process of inserting an image into a webpage unnecessarily complicated. Coming from Wordpress design, I was used to having a media library popup where I could add and/or select from images. The current Pinegrow approach of presenting only images in the template library then editing the image link to reflect your own image source location seems tortuous and really anti-intuitive. Is there a way of editing the template library settings to configure a media library? My searches revealed that this was a common problem that irritated the heck out of new users. I suggest that you have a “How-to …” page or WIKI that covers common issues like this one, for new users. The user community could add hints and tips, as they solve problems of their own!
  3. The text overlay on image technique in the Summer Nights CSS Grid Tutorial seems to stop working after a few changes to the grid (again, I found a LOT of user confusion about why). The only solution I found was to start over with a new template. Then I found a way of setting text and image overlap precedence using the z-index parameter. This is worth knowing about as text (and image) overlaps seem to disappear frequently when using Pinegrow!

The main issue that I had was not understanding the core web design frameworks well enough to understand the UI controls (which was why I wanted to use a WYSIWYG editor like Pinegrow). My last meaningful web design experience (prior to using Wordpress for a few years) was Dreamweaver. I knew CSS, but had little understanding of CSS Grid, Flexbox, or Bootstrap – all of which seemed intuitively useful after using Wordpress Gutenberg. Following a lot of trial and error, I realized that I needed to work through some explanations of concept before I could understand the different Pinegrow controls (for example, layout property controls vs. Flexbox controls).

Here are some great resources and explanations that I found, that may help other newbies:

OK - I don’t want to sound too negative as I really appreciate the power of Pinegrow as a design environment, and I really do like the package. But it is not designed for those who are not up to date on current design frameworks. I hope the resources I posted might help other newbies who are struggling with what the controls do!

4 Likes