Online Portfolio - trying to create overlays as buttons and trigger full screen image sequences between web pages

Whatever you end up doing, I’d love to see the final result.

Muse is something I played with very briefly… an early version of the program, before it introduced it’s version of responsiveness. I can understand the appeal. It’s more like InDesign for websites. Very few constraints design-wise. Unfortunately, the code it produces is an absolute nightmare. I took one look at it and vowed to never build a website in the program. Eventually, (ironically) Adobe came to the same conclusion, and realized their software was filling up the web with garbage code, (which I can only assume is why they discontinued it.) I can’t even begin to image how you’d edit a Muse-created site in Pinegrow. It would be torturous.

To create your vision in a “best practices” sort of manner will be difficult to do in any “drag-n-drop” or WYSIWYG type of software, because few of them follow best practices. Pinegrow is just about the best implementation I’ve seen of visual site-building tools that don’t result in code that is gobblydegook. But that’s because all Pinegrow really does is give you a way to manipulate code visually. The trade-off is that to take advantage of its time-saving features, you kinda need to understand what it’s doing “under the hood.” I think of this program more as a CSS/HTML editor than a website builder. If you know what you want your site to look like, and do, you can type it all out in Notepad (or some other text editor) or you can “lay it out” in Pinegrow (and you may still need to do some typing here and there) but ultimately, your doing the same thing in both programs.

Muse (or Wix or Weebly or Webflow) (lots of "w’s huh?) will spare you the pain of dealing directly with the code, but there will be trade-offs, the main one being that you’ll never fully understand what you created in the programs.

Ive got a basic version - without animation between the click and page change.
The main thing that drove me to muse last night, is i just wanted to simply put the background image in, it was an absolute mission - even after finding tutorials i struggled.

In muse, its simply draw a rectangle, use an image as the fill. Then click and drag where you want the button to appear, and use the overlay image as the fill.

If someone could point me in the right direction to do this sort of thing with Pinegrow - even if it involves basic coding, CSS and JS id be happy. But the steps ive seen so far are missing certain details… Marf’s description looked easy when i read it, but putting it in action was difficult.

Things like re-sizing a background image, which should be a basic tool in my mind arent in an obvious place (i couldnt find this anywhere?)

for those interested - heres a link to the rough version i put together in muse (open the zip, and then the index.html)

If anyone has some feedback around how i could get to this point in PineGrow id be interested in learning - as i do agree with most of you that it is worth learning to do this the right way, its just when you know you have a tool that can do it in 10% of the time it makes it a simple decision.

1 Like

youre right, it is a good model - however i have no idea if my student account will be activated - you still havent answered that basic question in this forum?

Here’s your same exact home page done in plain HTML in Pinegrow. You can open it as a project. The links, of course, do not work in this, since I just redid the home page quickly to show you how it’s done.

You’ll note that the both the CSS and HTML are a fraction of the size of what Muse produces. Also, you’ll see that the fade effect on the image overlays fades both on hover and off hover.

1 Like

thanks, ill have a look at this in pinegrow later on today

I’m really enjoying this! thanks all :slight_smile:

@Printninja you’re a brave one. I was going to download the archive file but then I thought I don’t know the first thing about whats in the archive and I don’t even know if it is an archive of a site (no exposing my computer to a potential virus). So for me playing it safe = useless at helping others! Well done and very helpful.

Just run a mac. . . . Peasant. :slight_smile:
And i was enjoying this, willl play again when/if i get back tonigh, but got confused as @printni ja site didnt contain thr original background image. So i had spooky images appearing out of thr ether when moving the mouse around, u til i figured that out :slight_smile:

1 Like

Sorry, my bad. I forgot to include the background image in the images folder. Here’s a corrected ZIP file.

ah! all good. I didnt want to say anything earlier, incase I got slated for copyright infringement or such like malarky… even though it was obvious you were helping the actual creator to to enliven his vision!
:slight_smile: nice work, both of you you. seriously. nice.
and Robs post about glyph icon editing things is interesting too.
I am currently ploughing thorugh Black Friday stuff them will come back to play :slight_smile:

Why would someone go to all this trouble of seeking help in a Pinegrow forum just to spread a virus? Besides, you can examine the contents of zip files without unzipping them.

Been using computers since the late 70’s. I never run any kind of virus protection, and I’ve only gotten viruses that I was expecting to get because of the seedy sites I was visiting. Most of the time I surf with no-script enabled, and I run a firewall. After enough years, you can just feel when something isn’t right.

But, I ghost my C: drive every night and run a mirrored raid, so the worst that could happen is my O.S. gets trashed, I do a 10 min drive restore, and I’m back in business. I’ve had more catastrophes from hard drives crapping out than any kind of nastiness getting downloaded.

1 Like

Not a bad approach… me I just don’t download files I have questions over :wink: