Pinegrow tutorial, anyone?

Hi, I need a program that can take my old website, created with the now defunct WebPlus, and update it. Pinegrow seems to be the only program that will allow me to import a site and do this.

But it’s way, way more complicated than WebPlus - and to be honest, above and beyond my skillset. At the moment, I can’t get beyond the message ‘Can’t select element created at runtime’ which appears every time I click on anything. (I emailed PInegrow support and they couldn’t help, telling me that the elements must be Javascript, though if I could have coded in Javascript, I wouldn’t be writing this message.)

Perhaps I need someone to talk me through the basics? If so, is there anyone out there who can help me with a tutorial via skype, hopefully free but if necessary, for a small sum.

Or maybe Pinegrow is not where I should be. Can a different web design tool achieve what I want, and with less knowledge of style sheets, javascript, etc.?

In short: Help!!

Thanks in advance - John.

Are you having problems with one page or all pages…??
Are those HTML, CSS or Javascript files, or other kind of filetype(s)…??

There is probably something wrong/corrupt in your code (HTML structure), that’s why Pinegrow can’t handle it right. That’s something you have to find out and fix first. Hard to say what it is without seeing any code, can you post a link to the site or page(s)…

Pinegrow can handle such files like HTML, CSS, Javascript and can work with it, that’s not the problem! If you use Javascript in your site, you can disable it or leave those JS files out. To see if that helps, and know where the problem is.

hi there @jomahony, and welcome aboard :slight_smile:
with regards your query, I see

“Perhaps I need someone to talk me through the basics?”

well, the basics of what exactly? I’m not being factitious
as in,

  1. would you like help with the Pinegrow interface, which can be overwhelming as you already code (in which case, have you checked out the PG docs, and the large volume Vids and tutorials - which — are not terribly well organised, but there are lots in certain themes :slight_smile: )

ie
https://www.youtube.com/channel/UCo2RGSbsI9GIxVvJPXanUuw/playlists

especially

which SHOULD be the * getting started* collection of 14 videos. it is a for an older version with a slightly different interface (which may well confuse the issue but, hey! for improvisation)

or,
2. you cant code, would just like to use Pinegrow as you did, as a wysiwyg editor (again, have you found the PG vids and tutorials?)

Or
3. you’re not sure/have no idea how the code side of web things even work as you have ONLY done wysiwyg things and so might need a hand with the basics of web coding, which , you are probably going to have to get to some grips with - the basics, just to have some idea where to look when things go SpRoIn!!! and jump off the edge of your screen.

if 2 or 3.
then check out

so, you might want to roll your sleeves up a bit and start to tinker around, learning some stuff. :slight_smile: welcome to the new web :slight_smile:

There are the Docs for that
https://pinegrow.com/docs/

and again , there will be older docs to check out :slight_smile: and more vids,
and this forum :slight_smile:

so you see, there are few different things, depending on what exactly you would like help with.

It can be overwhelming, but using this and …learning some new stuff, in order to figure out the new way of web working… is , the way to go.

Or, online, draggy droopy Wix sort of thing, where you stuff lives in their jail as you can never manage to break it free from their templates again.

so have fun, check those things out , scribble on paper and ask more questions here and , well, start learning :slight_smile:
Pinegrow, the Interface, necessary, coding, pretty much neccesary too, but the more you get to grips with PineGrow, and the more blocks and things you use, the less actual coding you will be doing.

but some understanding is basically required.
:slight_smile:ok good luck

Typically, the “can’t select element created at runtime” only appears when you’re trying to click on something that is generated dynamically by a script, (like a scrolling photo gallery) or if you’ve loaded a website from a live URL and are trying to edit parts of it. Depending on how much on your old site is being done via scripts, you may see that message appear on a great many elements.

As far as “updating” your site built in WebPlus, I would seriously discourage you from trying to do that. Even if you could successfully import the site into Pinegrow, sites built using WebPlus were already outdated years before the product closed down. Everything is positioned absolutely (non-responsive) and the code generated by WebPlus is completely incompatible with modern responsive frameworks, or things like CSS Grid or Flexbox. You’d eventually find you’d have to rebuild the site from scratch anyway.

I’m sorry if this sounds discouraging, but it’s sort of the unfortunate reality of the way the internet has evolved. Most people are accessing websites on mobile devices today, and the old static websites designed for 1024px wide displays are slowly going extinct.

You can certainly use Pinegrow to build a new website. The learning curve for someone who has no background in HTML and CSS is admittedly a bit steep, and to get the most out of this program, it really pays to learn both, but that’s actually a good thing.

If you’re totally averse to code, you might want to look at other alternatives. Very simple drag-n-drop WYSIWYG desktop software is not too common nowadays. Mobirise, Bootstrap Studio, Pigendo, Coffecup all offer desktop builders that can build responsive sites from templates, but customization may be limited by the software, your coding skills, or both.

Wix and Weebly are both hosted (cloud) drag-n-drop builders, but require monthly payment plans. Webflow is also quite popular, though it has a higher learning curve than the others two.

1 Like

hi @jomahony if you want to pm me I’m more than happy to try an help you find a way to use PG, either help trouble shoot the current issue(s) or help you try and re-create from scratch as a learning exercise that might be of more use to you going forward. Let me know and we can try and set up something.

1 Like

And this is a pretty fresh release of info, from Ondrej , over at Bootsrapious,
this is a fellow innovator in the web world.

I always have nice feeling about his stuff. check them out too.

so this explains, Bootstrap, which is a FRAMEWORK
which is basically, just a scaffolding.

of Web Page Content code (HTML). and the Styling of those coded objects (CSS)
in the form of BLOCKS… of code… that are rendered as items on a web page.

squares, big windows, pop ups, alerts , paragraph blocks. You know everything you see.
so, this is one step on , from draggy droopy.
you can drag and drop these things in Pinegrow too, but this shows the code and how to tweak items from the BOOTSTRAP library of … items (blocks nav bars, image holders etc)
so that. you don’t have to recreate every thing over and over.
That\s what frameworks are all about. giving you blocks of code, to copy and paste.
which in Pinegrow and Bootsrapious, Blocs, and other things you can visually manipulate

Thanks everyone. All very useful.

Even so, I think that it is impossible to use Pinegrow without a better knowledge of the basics than I currently possess. I’ve stocked up on books about Bootstrap, CSS and Javascript and will spend a few weeks getting up to speed. But I reckon I’ll still need help when I try again. Look forward to drawing on your knowledge then!

Best - John.

1 Like

I guess you’re passing on the free help then :slight_smile:

well done @jomahony, check out

and a scullion other good, free (not always together) online resources :slight_smile: