In the colors area, I’ve unlocked colors, I’ve changed them. No matter what I do, it has no effect on any of the images, any of the colors that I pick throughout my design from the right panel. The color swatches on the right panel area for background and so on do not change even though I changed them in the colors area.
Even adding fonts or changing sizes of fonts or basically anything in this colors panel doesn’t ever work.
I’ve tried six different new designs from scratch and all six times this panel has no effect on anything. How can I get this panel to work so I can actually change the colors to what I want them to be?
Might be helpful if you provide a video of what you are doing and how you are doing it and what you are doing it with.
Testing out a few different programs. I’m really liking PineGrow, but for what I need to do, I think it’s going to be easier for me to use Greenlight/Greenshift to do it right within WordPress.
With Pinegrow if the customer makes changes to the text on the screen in WP , Pinegrow would not get a copy of that. And then if I made a change and uploaded the site again, it would wipe out anything that they created.
So keeping all of the redesign and everything right in WordPress for these sites I need to remake, I think would be the better way to go right now.
I posted about using Greenlight Greenshift but I’m still on the fence with this. I really like how PineGrow’s interface is working local much better And the multi-views. I’m back to watching a lot more videos. I can definitely learn all this over time. But the updating of the site is still the problem. Is there something that makes this happen? Or how do people deal with this?
Is there some way that PineGrow can tell when a user on a WordPress site makes a change so it updates the local version so the local version then being pushed up when a change is made does not overwrite any changes the customer had made?
That’s the main thing we’re… …kind of fighting with now.
I have a way to replace the pages one at a time now using a plug-in On the live site so I can push blocks into a duplicate page to replace the current page when I get all the blocks done.
You design and build the WP theme in Pinegrow, and let Wordpress handle the content. The theme doesn’t destroy the content, it displays it.
1 Like
For my use, I’m not doing a theme, I’m doing blocks that I have to replace another website with.
But even if it was a theme, if I have a whole website done for a customer and they can log in, go to any page and I have it so it’s editable and they change a bunch of text on one or two pages and change out some of the photos.
None of that changed out information is going to be given back to my local version in Pine Grove. So then if I push out an update, changing some of the design, won’t that override all the new text and photos that they’ve changed out?
Or because they changed only the edited areas, all that stays the same. So when I push up an update, my update is not replacing any of that text or images that they’ve changed.
I’ve come to the conclusion that at least for right now to get some things done faster I’m going to design these blocks in bootstrap. I can’t seem to get Tailwind to work as good with the block layouts. I’m not grasping the grid in the flex and how that works. Just dropping things in the bootstrap… grid boxes makes more sense to me right now. I’ve spent most of the day just watching videos and testing things. Plus making some other updates on the sites. Because the sites were sold, I have to replace a lot of people’s names with the new owners, change over PayPal payment systems, and so on.
You can add specific files for the Wordpress editor and front end per block if you want. Just expand the More Options.
That content is stored in the WP database.
I did another sample save out to another WordPress test site and I did add that style sheet into that extra area I saw in one of the videos.
Is there a video that fully walks you through understanding how to change the different items for the different screen sizes? I understand that everything is based on the cell phone size, but then when I go and click on one of the other sizes and change something it’s still changing even on the cell phone size view.
Also a video or information on how to set up a page section being full width versus some areas where you want full width color but your content in a container area of 1200 pix.
I don’t see how to adjust that or tell what it is even when I’m looking at a full width area versus a container area.
I’m going to try to do two pages a day, at least for the next 18 days, maybe starting tomorrow, to get these sites changed over. All doing the blocks. Just watched that long series on CSS grid today.
So maybe I could use Tailwind. I’ve got to practice that some today.
So there’s no way to select multiple blocks on a page. Like If i have eight different block areas, I couldn’t turn all eight into one block to just drop in ?.
Looks like I’m going to have to come up with a good naming system. Name each block area based on the page. Like, home block 1, block 2, block 3.
Order page Block 1, Block 2, Block 3
Contact Block 1, Block 2, Block 3 and so on.
Does that make sense to be able to have so many different blocks for so many different pages to be able to find them more easy?
Sorry for so many questions, but one more.
In one project I spent a bunch of time creating a bunch of pre-made layouts and saved them.They show up in the insert area up top to use In that project…
But now when I open up a new project, those items are no longer there for me to use. Is there a way to make them so they’re usable in any project that I’m working on?
I included a screenshot showing the items in the insert area.
Thanks for your help.
This is where you need a basic understanding of HTML and CSS, Pinegrow is a visual code editor. The Page view size, is just a page view, utility classes aside, you need to assign styling to the various breakpoints based on what you want to achieve.
You are a little all over the place in what you are doing. So you will get muddled up. Like I said on an earlier post, you are in for a steep learning curve. And you are switching between Bootstrap and Tailwind. Use the framework your WP site is already using, or build a WP Theme in Pinegrow and save yourself a headache.
The Pinegrow Docs contain a lot of information, best to check here first.
What the sites are currently using, they were built with Beaver Builder in WordPress. I’ve built probably around 200 websites with Beaver Builder. And I understand how the different sizes work. It’s just I’m used to it being super easy to do.
In there I just basically click on a cell phone view and I can edit everything in that view and it doesn’t affect the other views. Click back to the desktop view, change everything in there and it just works same with a laptop to tablet view each one you edit and is all saved for that view.
I’ve tried multiple times today playing with the grid view today for a few hours and I’ve still not been able to get four images next to each other in a row in a containment area in the screen. I’m used to being able to do this in about 30 seconds. I’ve made a lot of photography websites, so I’m dealing with photos and photo galleries and placing images all the time.
I need to move away from Beaver Builder we are no longer going to be paying for it.
For the four sites I need to change over, I need to replace the pages one at a time.
That’s why I can’t do this as a theme. I need to keep the same exact page names because I have backlinks and SEO. These are live sites that are taking orders.
These four sites were currently sold to a new owner and I have to move them away from Beaver Builder also moving them to a different server. That’s why I was going to do this as blocks one page at a time because I could replace each page and then when they’re all replaced just shut Beaver Builder off and remove it.
The biggest problem I’m having now is I still cannot get the color panel to do anything. I can change the colors all day long, but it has no effect on any of the styling, background, buttons, or anything to apply to the design I’m working on. So I can’t match up the colors.
I’ve just started designing multiple different pages five or six times now and keep getting stuck and then starting over. But the color panel… Is the biggest problem now. I cannot set the colors that they need to be.
This is a big learning curve. I’m used to it being very straightforward. Click on this, change this color. Move a slider here and there to change the box sizes.
I used to be able to design a whole site just working straight through for about eight hours.
I’ve worked more on trying to learn this in around a week now and still haven’t even achieved making one finished page.
First of all, I know youve got a lot of experience with Beaver Builder, but its important to understand that Pinegrow takes a fundamentally different approach. Its more focused on traditional development and close to the code, so your relearning curve is going to be long.
I suggest trying the example templates and getting familiar with how the standard features work, like the Design Panel.
As for using captured templates from sites running Beaver Builder that rely on unknown frameworks, many different scripts, and odd structures, thats not a great idea to work with the design panel.
- Design Panel for Bootstrap: Bootstrap Design Panel | Pinegrow Web Editor
- Design Panel for TailwindCSS: Tailwind CSS Design panel | Pinegrow Web Editor
- Design Panel for plain HTML: The Design Panel for Plain HTML | Pinegrow Web Editor
It’s especially important to understand that not all features are available depending on which frameworks you use, and that you’ll get the best experience by using TailwindCSS.
For WordPress, we have in-depth tutorials that I encourage you to go through completely. They are available here: https://pinegrow.com/docs/wordpress/courses-tutorials/
Adam Lowe’s Pinegrow Masterclass is particularly useful: Adam Lowe’s Pinegrow Masterclass: A Comprehensive Archive of Tutorials and Insights | Pinegrow Web Editor
Youll also find tons of info across all our videos, including the ultra-complete tutorial on the Shop Builder for WooCommerce add-on. Even if you dont plan to use WooCommerce, that course is full of info and tips that will help you develop your blocks.
Here is another super ultra interesting tutorial: Flex - Creating a Tailwind CSS Theme with Gutenberg Blocks and Pinegrow Interactions | Pinegrow Web Editor
Enjoy the video and the read, and good luck with your future development work.
1 Like
I think I have probably watched 90% of all your videos online, which gets confusing because if you start with some older ones and then see how the interface is completely different now and how some things AI does now better than it did back then gets confusing.
I’ve also spent a lot of time reading the different help files on things.
I also have Bootstrap Studio. So last night I tried building a design in it, which I find to be much more straightforward and easier to use.
I designed half of a page in less than 30 minutes that I haven’t even come close to in over a week of trying to do it in Pine GroW.
And then I exported it out and brought it into Pine Grow. I haven’t got to it yet today, but I was going to then test to see if I could push that to WordPress as blocks. I could design things much more easier in there. The color panel actually works. I can change colors to anything I want. Drop in elements and they actually fit and work. I’m not sure why these things don’t work right in Pine Grow that easy.
I have one site that I did in Bootstrap Studio that’s live, one long page site.
I used AI and it to create most of the page. I even tried to recreate that in Pinebrow and I can’t even come close to it.
I keep running into problems. Things I can’t figure out. How they work. The color tab never working.
Images and areas not aligning correctly. I haven’t even been able to get some center text areas to align in the center of the page.
I’m looking at the app now called Live Canvas. Just found that earlier today.
It’s basically an HTML bootstrap version of an app that works right within WordPress and it has a live interface so you could work live on the site with the controls.
You can import in HTML sites and it converts them to WordPress And you could be editing them right away in their interface.
So this might be the easiest way for me to work on the sites I need to change over. After watching many of their videos today, it seems more easier to use than PineGrow or even Bootstrap Studio with its drag and drop and extra controls that they’ve built into it.
They don’t have a demo so I’ll have to buy it. They have a 30 day money back if I end up not liking it. I might do that tomorrow to see how that is.
One quick practical note first. Most of our WordPress demos are recorded with the interface set to flexible mode. If yours looks different from what you see in the videos, go to Window, then UI Mode, then Flexible. That alone might make things feel more familiar and easier to follow along.
You are right that Pinegrow has a lot of features and several ways to accomplish the same thing, whether through the visual interface, the panels, or the AI assistant. That flexibility is genuinely one of its strengths, but we also understand it can feel overwhelming when you are trying to move fast on a real project and do not have time to dig through documentation.
Whatever direction you decide to go from here, we wish you the best with your project.
1 Like