Thanks for sharing this, I was using LT Browser until now to check the mobile version on different devices; this ResponsivelyApp looks pretty good.
@adamslowe speaking of which with Pinegrow, if you look at the Desktop and Mobile version next to each other inside Pinegrow, I’ve noticed that if I scroll down with my mouse on the Desktop version, the Mobile version does not scroll down – > is this what it’s supposed to be like? i.e. click on Desktop preview mode and you see only Desktop even though you have the Mobile preview too?
It’d make sense if you have both modes on and other preview modes on, when you scroll on one preview to see the other previews scrolling at the same time:
we are very much alike in this. If i see a WP theme, I do the same, copy the style and look of it in Bootstrap, it gets super clean and no bloatware. Also not to mention security wise HTML is way better than WP (cough cough you have to check your WP security daily )
I do hope that Pinegrow staff will listen to some of beginners concerns. I personally have seen a trend of users giving up on heave-prone-code tools in favor of easier-to-use-visually ones (i.e. Breakdance or other desktop website builders that are visually easier to use with drag and drop), and those user bases are growing.
The different panes are designed to be independent of each other, as far as I’m aware. They are for targeting different breakpoints in CSS and Frameworks and for visual inspection. I personally prefer that they not try to mimic each other, but I’m a bit of a weirdo so take that for what it’s worth.
There is room for improvement. I think overall the UX looks dated and some things could be simpler. But it works.
Even though I have noticed that the dev team have now a better UX logic in their newer products, example Interactions, Tailwinds css, WP smart actions etc etc…maybe PG bootstrap remained a bit in the past as it was one of their first projects…
What a great post. I have been using Pinegrow now for several years, because I wanted to leave Adobe and I don’t want to be a coder - just a better Designer. I like a lot of your suggestions for reference info. I use PG almost daily for the site I build and maintain for work, whisch is a static HTML/CSS/JS but would really like more drag and drop additions as well.
Basic Animation: simple fade in on scroll type actions should be built in (use the old Animator plug-in) - the current “Interactions” plug-in subscription is far more than I need on a regular basis.
Off Screen Menus/Nav Builder: For many sites the menu is the first experience the user has, and a dedicated style pane/builder or even more library items would be a good start. Every time I start a new site, building nav seems like such a hurdle.
Site-Wide Find and Replace. Currently using VS studio for what feels like something that should be a given feature. Same with a spell-check
Also, maybe a script library of common actions/modules built in? Not being a coder, going out and finding scripts online and hoping they work is not always easy or successful.
For example - what if there was a “Contact Us” block that would have the proper PHP or other backend included, where I just need to point it to the right address. Currently, if I add a Contact Block there is no direct way to understand how to make it work.
I’m new to Pinegrow (thanks to you) and it’s quite overwhelming at first, I must say. I want to use it mainly to develop WordPress sites. I am not an experienced developer yet, hence why I need it. I want to spend time perfecting my frontend skills while using WordPress as my backend. I believe Pinegrow would offer me that.
My first impression was not good at all.
I have an SCSS starter folder with subfolders for my partials. When I opened the project in Pinegrow, it regenerated my partials as the main SCSS files. I tried it several times. I couldn’t get it to work. If I choose the final optimized CSS file (dist/css/style.css) as the main stylesheet, all new classes in the UI would be there, instead of in my intended partial folder (utilities) for such.
I didn’t find any good tutorials (written or video) using partials in Pinegrow, so no way to even check if I was doing something wrong.
I couldn’t use the UI to apply CSS to classes. I either edit in the code editor or use VS Code. It was all too messy. I wanted to create a simple landing page, but I couldn’t get it done till the 7-days trial ended. It was just not working.
I don’t know if I should give up and move on. I currently use Bricks Builder and it offers me a lot of flexibility with the class-based editor. I just paste my final CSS in Customizer (Additional CSS) and I would have access to them in the editor. But I’m trying to learn and build correctly, meaning, leaving behind the extra classes and IDs from the builder with their animations and ready-made components, and building mine with available open-source libraries if required.
I had so much hope and expectations trying out Pinegrow. I couldn’t just get it to work. I tried several times. It would really be nice if the Pinegrow team could have updated beginner-friendly video series.
I think you were the person who DM’d me on Facebook, yes? Did you have a chance to check out this link that I sent with instructions on how to do the Sass thing?
If so, and it’s still not working for you, please let me know.
Also, using vanilla CSS in Pinegrow can be a bit tricky since there is so much going on with the UI. Once you get it you’ll probably appreciate all the options, but I’ll be the first to admit that it can be overwhelming.
(Note to self: I really need to do a HTMl/CSS 101 video)
I definitely suggest working through the tutorials that are built into Pinegrow. They are very well done and do help explain the interface and how to accomplish various tasks very well. Evne if you think you understand the core concept being shown, Matjaz and his team have done a great job of introducing general usability tips sprinkled throughout the series.
And of course, don’t hesitate to post in these forums. Most of us are pretty friendly and willing to help. I try to visit once a day or so, depending on my availability, and I know the Pinegrow team tries to answer anything that people are struggling with.
Huge thanks to all contributors in this thread! We have started a project to improve the UI across all Pinegrow products, both in terms of usability and design. We will use this forum to have an open discussion about specific points, as we go along.
I actually abandoned Pinegrow recently in favour of Metabox and Builderius. Following a conversation on the dynamic WordPress group. Where I said it would be amzaing if I could build themes on PG with custom fields. post types, in essence manage the content. I would then use builderius to style and query the content. I was under the impression that I would need either Metabox or ACF, too. I guess I didn’t see the point in Pinegrow. I had a subscription for at least 2 years and didn’t use it.
Well, that’s going to chance after watching after watching your YouTube video.
My understanding after watching this video, I don’t need ACF or Metabox for custom fields, post types and taxonomies. After watching your video, I think based on my use case I have what I need to create a theme.
That said I maybe missing something so just in case I’ll be starting your course within the next week.
By far the biggest general problem is that PG have a reluctance to teach new users. The documentation, while extensiveness doesn’t mean that user understand it.
I find it dismissive as a new users. You are doing great work in bridging that gap. As more and more website builder move towards components but dynamic data. I see PG to be a leader for content management and complement website builders with clean code.
There is always room for improvement and we thank you for your suggestions, but to be perfectly honest on this particular case, we actually mention the sources of documentation upfront that can help you acquire this knowledge
I’d take a different approach if possible. Find out if the documentation is easy to understand or helped. What is it that you didn’t understand? Other experience user could help. Also by the type of queries you get from in the forum.
When comparing the documentation on PG’s website to the adam Lowe’s videos. I find it easier to follow the videos. Adam also tried to make it as general as possible.
Maybe a complete video series based on a few different use cases may help.
I do like that you opened a topic to find out use cases from experienced users. It’s welcomed and should help.
You pretty much nailed it, although there is still a place for those things you mentioned. I’ll try to expand on that a bit here, so feel free to ask questions if I’m not making any sense.
Pinegrow can create custom taxonomies and custom post types natively with the Register Taxonomy and Register Post Type actions, which are just visual interfaces to the native WordPress functions that do the same thing. Pinegrow doesn’t have ALL the options in the UI, and it’s nowhere near as beginner friendly as CPTUI or ACF/Meta Box but it is very functional and looking at the WP Developer Documents (linked above) should help fill in any missing pieces.
As for custom fields, I’m going to split this up into two topics; 1) Fields in WordPress blocks, and 2) Custom fields that can be accessed anywhere in WordPress.
Pinegrow handles adding data to the custom blocks it makes very nicely. You can add images, text fields, text areas, rich text fields, dropdowns, toggles, links, and colors via a color picker. That data can be used as content, images, background images, links, styles, attributes, or classes. There is a LOT of flexibility here! In general, though, the fields in a block are relatively self-contained and are not easily accessed outside that block, such as through a loop or query.
An ACF or Meta Box custom field, on the other hand, is data that CAN be easily accessed in a loop or query as well as in a Pinegrow or ACF block. Its data is generally attached to the post rather than the specific block.
So which one do you use?
If you think you need to query the information in a specific field, create a custom field for it and reference that field in your block or page template. For everything else, such as the majority of the site content, keep it in the block.
This, by the way, is going to be pretty common with all builders unless they are creating new custom field capabilities or have licensed ACF or Meta Box to include with their product (as Cwicly has).
Unfortunately, WordPress is still a blogging platform at its heart and relies on 3rd party plugins for much of its CMS capabilities. For some unknown reason, it doesn’t have a great way to register custom fields using native functions, which is why tools like ACF and Meta Box exist. Pinegrow tries to expose built-in WordPress capabilities, but they generally stay away from adding new capabilities to WordPress.
I hope this helped clear things up a bit and didn’t raise more questions than it answered
This should work just fine. I think. I’d use Builderius to query the blocks and it’s content. In fact, which I didn’t think about us creating editable block layouts like in your video. Where builderius uses graphql, i can use it to create query loops and in the builder. I was using Builderius for the wp menu and it can exclude entry fields.
Say I want to have an options page, I was thinking about creating a non indexed page for thinks like opening times as an example.
Builderius allows you to use php within the graphql too. While I haven’t clue on how to write or read php I could learn what I need.
So I guess for me, I don’t think that I need ACF/Metabox but I may also be missing something.
Let me know if you think I’m missing something from a high level. (maybe from space)
From a super-high level, it sounds like you aren’t missing anything. Feel free to reach out directly to me, or start a new thread, if you run into specific questions.
)
I will do.