My experience in pinegrow coming from webflow

General
1

Hi, I’m coming from webflow looking for a similar but offline program …

I wanted to share my experience (and maybe twist for some improvements) … maybe I have some item that exists but I can not figure out how, soo, let me now :wink:

(sorry

Things I really missed (a lot missing):

1.1 - Renaming classes
in webflow when a class is renamed it applies to all html and css, being very easy to rename something. So far I have used the sublime text to do this.

1.2 - Automatic Responsive
In webflow when you select a screen size, any changes you make will automatically add the @media needed to the code, it’s super simple and practical, 1 click for all changes in the chosen size. The same happens with hover, active, etc … you select the button state and already can edit the style it creates :hover sutomatic… In pinegrow it’s like creating a brand new class every time …

Things I missed but that’s okay:

2.1 - Viewing Class Style Not Highlighted
in webflow it shows (in another color) the style that is being affected but of a class that you are not selecting. For example: if I have a class with margin: 10px and I create one on top, the webflow shows me that it has margin being affected, in pinegrow I have to search what atribute is causing my button to be more to the side …

2.2 - Shift and Alt for Margin and Padding
In weblfow, holding Shift you change all the margins, and Alt changes the parallel margins, super practical …

2.3 - Color palette
I felt the lack of being able to save a color to use later in another place… I know it is possible to use Sass, but a panel helps to visualize all of them …

2.4 - Doom collected and expanded
In webflow has a button that collapse and expands the doom, it makes it much easier to make things clearer … I only found the shortcut ctrl + alt + click, but it only closes all items of the same level and not the sub -itens.

2.5 - Edit components
in webflow I can edit a component on any page.

Generally speaking I fell the webflow UI more compact, there is a lot more screen for the website design itself. The doom is also another thing that made me confused, a little crowded, it’s not very clear when a div starts and ends

image
image.png570×984 51.7 KB

We are animated to use pinegrow because it has many other advantages over webflow (it works locally, I can edit direct programmer code, all the possibilities that a css can offer, adding puglin, etc.)

But what I realize is that the webflow worked very well for the user who does not want to see the code, I can create a website without looking at 1 line of code. The pinegrow seems to me that it was not that way, it is good to be able to edit in the code, but there are many facilities in webflow because it tries to simulate everything you would do in the code. I know a lot of these things are subjective and personal, but I wanted to share…

I noticed that in the last years pinegrow has changed a lot, I hope it keeps improving … :smiley:

if I could put more images … (beginner user) :frowning:

6 Likes
2

I too have the same feeling about your point 1.2. about media queries and about having to create manually pseudo classes. We have buttons for the states but they only work after you have manually created the new pseudo class…feels weird to me. Would be nice to just select the element then press the state button and style. Pg should then create the new class. Same for @media.

2.3 - Color palette. Yes, we should totally have a “favourites” in the color palette.
2.4 - Agree.

About the code…Most of people using PG want to see and feel they control the code. I like it this way too otherwise would have go with another visual builder out there.

Any way, a few months back, PG author, talked about creating another “version” of PG, a sort of 100% visual builder no code app that will coexist with this current PG.
PG is a great software and it’s making huge steps forward… I have been playing with it for about 6 months now. Maybe developers some times leaves behind simple but important things…and yes… the interface could be more bold and compact… not smaller.
Hoping these things will come…
cheers!

1 Like
3

It’s been almost a year of use now …

But so far it has not been possible for my company to migrate to pinegrow once and for all, sorry, but webflow is much faster to create websites, to create classes, subclasses, responsive (some of the reasons I explained above).

For some projects we are using pinegrow and for the other webflow. Pinegrow wins in terms of possibilities since you can edit the code directly, webflow wins in UI and UX, much easier and faster.

The launch of interactions will help our love for pinegrow…

Just resuming the subject and giving more feedback :wink:

4 Likes
4

agree with this list of suggested improvements, esp about the inefficient use of screen real estate and toggle options.

i hope that in the last 9mo your team was able to discover how in the visual editor you can use the up/dn arrow keys to change margins one increment at a time, or use the mouse to click and drag for large changes.

because PG will also automatically re-write the CSS to use the short hand notation when it can, you can also click in the CSS editor (put the cursor on the numbers) and use the up/dn arrows to change top&bottom or right&left values at the same time.

5

@droidgoo
We are always looking for improvements that make life easier for our users, and so, I’m curious here. Have you taken a look at the CSS code formatting settings since Pinegrow 5.8?

css
css915×399 74.7 KB

Regarding the screen estate, because of the floating panels since Pinegrow 5.1 so you can use 1, 2, 3 or more screens to display the UI panels, I guess that we offer a pretty (and unique so far) good way to maximize what’s on screen :slight_smile:

1 Like
6

hey, thanks for taking the time to reply (this is the best part of PG :wink:

i did look at the blurb in the release notes and this feature didn’t seem to be something i would need, so i left it on the default.

the CSS formatting tweek i would like to see is to keep grid area definitions aligned so they can serve as a visual map of the grid in your CSS (ascii art). Or at least fence off that bit CSS code from the auto format function, so i can arrange it myself and keep it that way.

i did buy a 2nd monitor just because of PG’s support for it, it’s quite handy to have the tree on a tall monitor next to everything else. I can also put up the code in VSC next to it and flip between html and css

But i still find myself manually collapsing things in the style tab to make room for the visual editor since they both occupy the same tab and there doesn’t seem to be a way to separate them. Having a “collapse all” toggle would be good.

my .00002 cents.

1 Like
7

Ha interesting. These are all things I’ve suggested to the team. Does anyone know if they’re being worked on?

8

we got more controls to collapse/expand the DOM tree, but CSS is still manual

9

I was trying to find out how can I rename a class in Pinegrow. Not only I’ve found it can’t be done (AFAIK), but I see these two points here:

1.1 - Renaming classes
in webflow when a class is renamed it applies to all html and css, being very easy to rename something. So far I have used the sublime text to do this.

1.2 - Automatic Responsive
In webflow when you select a screen size, any changes you make will automatically add the @media needed to the code, it’s super simple and practical, 1 click for all changes in the chosen size. The same happens with hover, active, etc … you select the button state and already can edit the style it creates :hover sutomatic… In pinegrow it’s like creating a brand new class every time …

I have been using Pinegrow for a while now and I couldn’t agree more with these two features. Just been through a simple responsiveness adjustments and point 1.2 has reminded me of how awful this is in Pinegrow.

What’re the reasons these two seemingly easy things have not been implemented yet? What features have been prioritized over these? Animations? This is disappointing.

10

I think I’ve commented on another thread about “automatic” media queries previously. The problem I have with an editor adding those for me is that there are a lot of possibilities. If I have a screen open that is 768px (one of my breakpoints) and I target a class that I want modified at that view, do I want it on all screens that size and smaller? That size and larger? From that size down to my next breakpoint at 576? I think any way the editor parses it either I’m going to be unhappy, or some other user will be unhappy. Just my 0.02.

As to adding a new media query, it is really simple. With the element selected, click the ellipsis, click the selector and click the media query button.

11

Such a 100% visual builder version of PG would be awesome! You could build websites faster and still touch the code directly in the normal PG if needed. These two versions should be 100% compatible then PG would be the Nr. 1 solution for lot of more people!

2 Likes
12

Allow me to add my own two cents in the pinegrow vs webflow comparison:

Webflow and Pinegrow are, on the surface, very similar products. They both cater to roughly the same target audience, they both have a visual approach to making websites and they are both web apps (even though Pinegrow acts as a desktop app encased in a webview by NW.js).

However, when you start digging deeper, you’ll find that, where webflow is a “no-code” solution, Pinegrow is closer to a “low-code” solution. Both products offer a visual, more or less opinionated way of how to visually build websites but Pinegrow, unlike Webflow makes it easier for you to color outside of those predefined lines. You can touch the code directly as a feature in the core product while Webflow only allows for code export without much, if any integration once done so. Another distinction is Pinegrow’s approach of integrating existing standards while Webflow defines its own standards. With that I mean, predefined UI components are provided by standards like Bootstrap, Foundation or Tailwind. Standards that have proven their merits outside of the world of Pinegrow. The same goes for its CMS. Webflow has a fully integrated Content management system. While I will not debate whether this system is good, bad or somewhere in between (as I haven’t extensively used it up to this point), Pinegrow integrates WordPress into its system, a standard that (barring some recent controversies) has proven its worth. In a sense, Pinegrow acts as a visual “hub” for established web standards, where Webflow wants to be the “Photoshop” (ina sense) of the web. Those approaches are fundamentally different even if the end products appears similar.

The interactions are also pretty similar between the two. If I recall correctly, Webflow had interactions before Pinegrow however. Pinegrow recently introduced them only this year (I know there was an animation plugin before but that one doesn’t really count). So in that regard Pinegrow is later to the party and had some catching up to do with its first iteration. Now with the release of interactions 2.0 I do believe they have caught up however. The new blueprints (sliders and such) are a very welcome addition, as is the native lottie integration (which Webflow also has and which I thought was a killer feature. Happy to see it in Pinegrow now). The use of existing standards is also true here as well since interactions in Pinegrow are based on GSAP. What’s more, Pinegrow provides an API to fiddle with the interactions in pure code. Once again providing us with tools to color outside the lines. That tendency, that philosophy is what I most appreciate about Pinegrow. It’s similar to the approach of the well known wordpress plugin ACF which does similar things (and off course, ACF is natively supported in Pinegrow, no surprise there. Great combo by the way).

So, the difference really boils down to the “low-code” vs “no-code” philosophy if you ask me. And (even if you can use Pinegrow as a “no-code” solution just as well) I personally greatly prefer the “low-code” approach of Pinegrow. It could be used in the same way Webflow is used potentially but with just a littlebit of technical knowledge you can get so much more out of Pinegrow than you can out of webflow and I find the advantages that Webflow does have over Pinegrow get smaller every day.

On top of that, Pinegrow is cheaper. Even of you add up all of the other additional plugins that you “need” for Pinegrow and WordPress (such as ACF).
Plus, something like Gutenberg does not exist in Webflow to my knowledge, so you can forget about content blocks there. Say what you will about Gutenberg but it really allows you to tailor the editing experience for your clients to their needs, which is a plus in my book.

Pinegrow also serves a little as a learning platform. When I started with Pinegrow I had barely any understanding of CMS’s. Now I’m seeing the pattern of how it all fits together. What Index.php, single.php etc… are for. What functions.php does, and so on… Before Pinegrow I hadn’t written a single line of PHP by myself (sure I had knowledge of html, CSS which you need anyway to use either of these products and some surface level understanding of jQuery). Now I occasionally add my own little snippets of PHP code in the custom.php file included with Pinegrow for WordPress. The day may even come that I no longer really need Pinegrow to create WordPress themes. Then again, I may still keep it around because it automates routine tasks and acts as a great organisation tool for my CSS (which get messy very quickly when you only write directly in the css file without tools like Pinegrow). That and the interactions off course.

I’m sure I’ve forgotten to details some things here but I’ll just edit this post when I think if them. Cheers!

6 Likes
13

Thanks for such a constructive and detailed testimonial @Roel

2 Likes
14

My pleasure :slight_smile:

1 Like
15

I totally agree with you. I also love the approach of Pinegrow as a low-code solution. You can edit any existing website in Pinegrow, that’s a big advantage over Webflow. But I I’m more a Web-Designer than a Developer so I think Pinegrow could help you a little more. The blueprints like Sliders are a good way, I think Pinegrow could also create a site.xml automatically or offer a form Blueprint with prebuild php-code for single forms.

I don’t really use Webflow because of it’s restrictions and pricing model. But it’s easier and faster for a Web-designer to built with Webflow. If it would be possible to do more things without code in Pinegrow (still with the option to touch any code if needed) I think Pinegrow would be very powerful for even more web-designers and easier for customers to edit their sites (maybe one day even online).

1 Like
16

Sometime in the future things might be even easier for designers using Pinegrow.

17

Hi @lucaspchara It’s been 5 years since your comment, Pinegrow developers are still turning a blind eye to their users’ requests. We still have to rename classes manually or using other tools.

1 Like
18

@creer As I mentioned in another post, since you responded to several topics, I’m going to copy an excerpt

Since 2014, we read and discuss EACH of the requests we receive here (and in our support inbox), but indeed, some may never meet the qualifications. Sure, we don’t have a public roadmap, but one thing is clear: we don’t make announcements that we don’t follow through on.

While we’d like to claim complete thoroughness, Pinegrow should be viewed as a tool in your arsenal rather than the solution to ALL your web-development needs.

I’d like to add that nothing is ever set in stone. Technical advancements in the tools and libraries we use to develop Pinegrow might lead us to incorporate features we didn’t think were possible just a few months ago. Nothing is unchangeable, and we’re always on the lookout!

2 Likes