Just of the fun of it I had a very quick look at the idea of using an overlay to help build out a web page in Pinegrow based on a layout created in Photoshop. I downloaded a free homepage PSD and jpg from somewhere (I genuinely can’t remember but here are the links to where the complete set can be purchased as well as a Wordpress version)
Waxom - Clean & Universal PSD Template (230 psd’s files)
Download: http://themeforest.net/item/waxom-clean-universal-psd-template/8407963
Waxom - Clean & Universal WordPress Theme
http://themeforest.net/item/waxom-clean-universal-wordpress-theme/13639831
After that I added a div with homepage jpeg and with a bit of css positioned it so it was centred on the page. After that I added sections, containers, etc. to help structure the layout and then started to add content. As I said earlier this was a quick effort so for some of the content I just exported as a png and placed it as an image just to speed up the process. I spent the minimum amount of time trying to get the positioning correct and I don’t even know if this site was designed with bootstrap in mind so it might account for some of the inaccuracy but most of it is just I didn’t put the time into making it pixel perfect. That said I thing it gives a good idea of how this could be done in a project.
Things I realised when doing this:
- It’s not that hard to implement in PG if you don’t mind a small bit of tweaking as you go.
- Showing/hiding the overlay in PG is easy and very straight forward just using the little eye icon beside the overlay container
- The overlay still appears when previewed in a browser, my workaround was to delete it in PG then check it in a browser before going back to PG and undoing the delete action to restore the overlay container, not a lot of effort and I thought it worked quite well as long as you remember to undo!
So here are 3 links:
I found that for some reason it displayed best when the browser was 1872px wide! I don’t know why it just did. It was an interesting experiment and one that I’m sure could be pushed to be even more accurate if I wanted to but it was just a quick experiment.
First displays just the overlay (what I was trying to recreate)
Second displays the combined (overlay and what I recreated)
Third displays just what I recreated
I’ve updated the css that controls the display of the overlay. By adding a class overlay hidden {opacity: 0;} to the overlay container it means that you can effectively switch on or off the display of the overlay container just by going to the css panel and clicking the + or - when you have the overlay selected on your page. It also means if you choose to view your page in a browser with the overlay displayed you can still switch it on or off just by using the inspect tool and selecting the overlay container and clicking the opacity checkbox in .overlayhidden class