Challenges for new Pinegrow users

General
1

I’ve had a lot of side conversations with new Pinegrow users to help them get started with the tool, and I noticed that a lot of people have a hard time adjusting to the workflow and UI at first. I’d love to hear from newer Pinegrow users about the challenges they are facing or the roadblocks they encounter as they learn their way around the product. This will potentially help the Pinegrow team direct efforts toward improving that “new user experience”, either in documentation or product improvements, and it gives me some fodder for new video content.

So please, if you have run into challenges and are willing to post about them here I would welcome that. It probably isn’t the place to ask for help (we can start a different topic for that), but it will be good to have a topic that consolidates some of the things people are experiencing.

When posting, please also note whether you are using the desktop version of Pinegrow or the WordPress plugin version. Also, whether you are using it mainly for general HTML/CSS/JS projects or WordPress projects. It may also be useful to know whether you use plain CSS, Tailwind, Bootstrap, etc.

Also, please, keep it civil and productive. This isn’t an open invitation to just complain for the sake of complaining :wink:

3 Likes
2

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
3

This is all valuable and helpful. Are you running the desktop version or plugin version of Pinegrow? (The main place it probably matters is point #2, where you described issues with using images).

4

I’m running the desktop version, on Windows 10. I’d love to know if I’m doing this wrong … :slight_smile:

5

(Below is all assuming that you are using Pinegrow to create WordPress blocks and/or themes)

No, you aren’t doing it wrong. I suspect this comes down to a functional difference between creating a web page with a builder inside a CMS (most WordPress-based page builders), where they have direct access to the WP media library, and working in a traditional HTML/CSS environment to create WordPress templates or blocks with media that is designed to be a placeholder until you add the real content inside the WordPress CMS.

Pinegrow’s WordPress addon isn’t designed to function like a page builder where you create the whole page. It’s meant to be a visual way to create PHP themes/templates or blocks with placeholder content that gets replaced by content from your CMS. Think of it as a visual assistant to creating a theme with something like Underscores or blocks with ACF rather than a page builder like Bricks, Oxygen, or Elementor.

1 Like
6

It’s more the confusion of having an apparent image library to insert from … but having no control over the location of that library. If the UI inserted an editable placeholder, or requested a link to the image, this would make more sense to a new user than inserting a random image that one appears to have no control over. I had to search the forums for a while to find out what was happening here.

1 Like
7

I may be confused. Pinegrow doesn’t have an image library; it pulls images from a directory on your filesystem or lets you search for them from Unsplash. Am I missing something silly?

image
image878×674 126 KB

8

I’m using the desktop version. Pure css, htm and js. I am at the stage of getting used to pinegrow.

  1. As I wrote elsewhere, the problem for me is the readability of icons and workflow with breakpoints. Sometimes I make changes not at the point I want and I lose time. Using this functionality is not very intuitive for me (I liked the webflow solution).

  2. At first, I missed built-in components such as navigation. I know that you can use bootstrap but personally I like clean HTML, CSS and js and I would gladly use such an option.
    I know that I can use my own components, but here is another element that I don’t quite understand. Especially when it comes to creating one organized library with reusable components. I haven’t seen a detailed tutorial on this that shows: how to sensibly organize and maintain such a library. By the way, the option of a native database with the ability to share your own components seems like a nice idea.

However, I feel that pinegrow gives me great opportunities and when I learn to use its capabilities, it will allow me to overtake many competitors.

5 Likes
9

No - my perception simply reflects newbie confusion and assumptions about where the UI was obtaining images from. Your juxtaposition of the UNSPLASH image window and the HTML source link is not what a new user sees. If I use +Insert (Element) followed by selection of the image tag from the List tab (the tab +Insert opens on), I just get a random image plugged into my webpage. If I want to select an Unsplash image, I know to go to the Images tab (now!). But if I want to use my own image, I need to let it do its thing and then edit the image link in the Properties view. None of this is at all intuitive - the UI reflects an architectural distinction between “CMS functions” and Web-page design which is meaningless to most web designers. Yes, I appreciate that Pinegrow is aimed for more technical users. Just pointing out that you already have a LOT of non-technical users who are terminally confused by this!

4 Likes
10

It’s all good feedback. I never would have thought this would be a source of confusion.

I’m considering doing a small “getting started” video series, so stuff like this is helpful.

4 Likes
11

I had high hopes for Pinegrow. However, the reluctance to see the benefits of using the internal browser to see “localhost” limits its use. I use PHP and Mysql, and since Apple removed PHP from OSX I have used MAMP for convenience. Pinegrow provides so many useful tools and effectively provides a useful learning tool for CSS layout but not being able to develop offline is something that really is missing.

How Many Websites Use PHP? [PHP Usage Statistics 2023].

1 Like
12

I am using Pinegrow Pro to edit mainly HTML templates. I’ve been a huge fan of Pinegrow since the beginnings and have come back to it over and over again.

Like other users here, I got used to Dreamweaver in the past. But the drag and drop, or editing visually the HTML template it is quite hard for me when doing it in Pinegrow.

As an example of a very visually and beginner-friendly take Breakdance which is a Wordress theme builder (not saying that Pinegrow is not visual friendly, but I find it hard to use in comparison to Breakdance).

If Pinegrow could do similar things visually like Breakdance, I truly believe it can be the most dominant in the market.

Another example: I use Bootstrap Studio to edit elements visually, then grab that code and copy it in Pinegrow; this could be easily done by Pinegrow but I find myself getting lost when having to update the color, or background or whatever other element of a simple HTML class (div etc)

I believe there are LOTs of users out there that would just want to drag and drop, change a theme visually and done they have the final HTML. This is a proven fact by the number of users that Webflow and Framer have and it keeps increasing (with a caveat that quite a few of them prefer the export HTML option which is not always super easy from these cloud tools).

If Pinegrow could make it easy to edit visually a HTML theme at any time, make it super easy to modify elements without digging too much in the code, then sky is the limit : )

PS: the main reason I personally use Pinegrow is that it allows me to edit the HTML code, but overall I’d love to be able to edit the HTML themes easier just visually

1 Like
13

@mxs I’m interested in knowing more about your specific use case. From my understanding, most people use Pinegrow to create static HTML/CSS/JS sites or WordPress themes/blocks. Are you saying that you are trying to create Non-WP PHP sites with it?

14

@globbersteir Is it the mechanics (things not moving to the right places, etc.) of visually editing the HTML templates that you find difficult or something else? Breakdance does a LOT of things, has a lot of pre-made components & styles, and makes a lot of decisions for you. What is it about Breakdance and BS Studio that makes them so much easier to use, in your opinion?

To paraphrase Luis from Soflyy, Breakdance was made for people switching from Elementor, Oxygen was made for people who want to work in a more code-like way. I’d wager that Pinegrow falls closer to the spectrum of Oxygen than Breakdance. That doesn’t mean there isn’t room for improvement, though.

15

Yes that is correct. I’ll give an example, I had an existent HTML template made in Bootstrap 5 that I bought from a marketplace. I needed to center a paragraph inside a div which was inside another div, basically I wanted the 1st div to be centered; that seems like a fair easy thing to do. So I looked into what class to use on the div to center it. I tried doing it in Pinegrow visually, but without success, could not get it going, even when selecting to center it.

I then took the same HTML file, drag and dropped it to Bootstrap Studio; also drag and dropped the style.css file to BS. Then inside Bootstrap Studio I selected the div, click Center, and I was able to see the class it used for Bootstrap 5 that centered it; so I then copied that piece of code from BS back into Pinegrow and it worked.

This was super basic for a developer but for me I found the BS being more helpful than Pinegrow. Please mind you, I still kept my HTML project in Pinegrow because I trust it more and I believe BS will not keep the HTML formatted correctly if you are importing the files. (also FYI by end of this summer they are launching a new feature with importing projects into BS which a lot of users asked for)

That is correct but it also allows to make changes very very quickly across all pages. For instance, because it’s on Wordpress, you can change inside Breakdance the Main Menu from one location and it changes for all of them. In Pinegrow, I have to create a Component for the Menu that will add classes to my HTML code, then reload the page components; It’s still doing same things but in Breakdance the process seems more friendly visually.

I can grab Breakdance > import a new theme > and I have a new website with 5 pages just like that in less than 2 minutes; then I can modify it easily. Then I can export the whole WP to HTML for instance. The reason I don’t stick now to Breakdance it is because when you export WP to HTML it puts all those files in so many subfolders and also Breakdance has some weird long-a** classes that it adds in different parts which I really dislike.

BS is similar but does not have many templates; I like it for easily editing the HTML code but I don’t see the full HTML code, only the sections I select. So Pinegrow is better in this regards.

I understand that and I am not taking away from you the fact that it is a great tool. And believe me, I recommend it to everyone. But for visually editing pages easily (HTML specifically for me), it could really improve some parts to make it more user-friendly for beginners.

I’d say if you look at Weblow or Framer, there’s lots of designers using them, that all they need is drag and drop, create design and be able to export a clean HTML. And then go back to the design, edit it easily visually and re-export it.

Also take Breakdance layout:

breakdance
breakdance1417×818 82.2 KB

  • the center of the page is your design
  • left and right you can easily change the elements of your HTML page
  • in contrast, in Pinegrow we got the Tabs that we have to click on to change things and I do get lost on those tabs trying to re-organise them to make it easier to change elements
  • if Pinegrow could tweak the layout to make it more friendly, I think it’d help beginners a lot
  • even if this goes against heavy developer users that like current design, if visually-prone users would have a Layout Theme they can choose that is more visually appealing, then at least they have an option and would use Pinegrow even more
  • now take this layout design as a sample, think of users able to build their templates visually easier, then export it to clean Wordpress theme → you got a winner that can easily compete with other WP builders

In regards to Breakdance what many users complain about is different WP plugins that break Wordpress when using Breakdance builder. Thus I would personally trust Pinegrow more on building the WP theme visually, that the code in the end will be cleaner than Breakdance and not break WP.

PS: Luis is a great dude and very passionate, hands off to him for Breakdance

PPS: but I am still sticking to Pinegrow just because it rocks and love it and hate it at times : )

1 Like
16

Most of my sites contain some php code - eg. simple elements like <?php echo date('Y') ?> and <?php include "hfm/menu.php"; ?> or more complex dynamic websites using Mysql data. eg.https://somerset-pubs.uk.
Personally, I can see no real benefit in using WP - if I see a WP theme I like - I just copy the look of it. Less bloated. Having developed websites since 1994 - I like lean and mean.
I must admit I use Bootstrap.

17

@globbersteir Thank you for the super-detailed and helpful answer. I have no idea what, if anything, Pinegrow can or wants to do, but it’s always good to know where users are coming from and the challenges they face.

18

:rofl::rofl:

Yes, I can see how the local preview doesn’t make sense in the case you mentioned. Does it make sense to move your Pinegrow project directory to your MAMP site folder and just preview it that way?

19

I preview with any browser and “ResponsivelyApp” (https://responsively.app) with localhost. Pity this can’t be built into Pinegrow

2 Likes
20

@mxs Oooh! I’ve been using Polypane. I’ll have to check out Responsively.

1 Like