How To Add A Page Peel

in WordPress Tutorials

I was looking for a way to make a certain page entice visitors deeper into my website. One technique I had seen involved the page peel – this is where the corner of the page looks like is is peeled back a little revealing something below the current page. Hovering over this reveals more and clicking takes you to the revealed page.

This is a great visual and gives the visitor the feeling they are really digging deeper into your site. Adding a page peel is easy and there are several plugins for it. I chose one that appealed to me for technical reason. It is jQuery Page Peel. What I like about it is, it doesn’t add a heavy Flash file that has to be downloaded. It also is much easier to customize. It is as attractive as the flash version, and is a fast performer.

Installation is a breeze (just follow the standard installation instructions) and activate the plugin. It defaults to having a page peel concerning subscribing to your feed. This works right away. For the site I added it to they are having a trade show. Since the group is interested in military history I set the corner icon as a little WWII hand grenade. It just sits there in the corner and beckons you to look more closely at it. As soon as the mouse get’s near, it peels back and reveals a B-17 and some info about the trade show. There is a faux button. This button has a useful function – it encourages clicking which then takes the reader to the appropriate page. Clicking anywhere works but that action might not be readily apparent so the button informs the reader that they can get more details by clicking.

The only thing you need to generate for this is an image that is 307px by 308px. You will only need to fill half of this image up since the page peel will go from the upper right to the middle of the image leaving the bottom left to center area of the image unused.

You then have to FTP that image to the directory containing the plugin and naming it custom_overlay.png. Once in place it will just work.

On the site I initiated it on, some people directed to go check it out actually missed it the first time. It is a subtle effect but also a surprising one. We don’t expect data to be revealed this way and having it come from the corner like that is an interesting surprise for some.

One final note, the effect works against every page on your site. You cannot control it to just be on some pages and not others. That was the only down side I saw to it.

To see an example of page peel in action try this link.

Link: jQuery Page Peel

Comments (1)

  • Comment by Amy

    Nice plugin – thanks for enlightening us, Peter. If you figure out how to make it show up on less than all pages, please let me know. I agree that it’s a very unobtrusive addition but sleek.