Visually the effect that StandOut creates looks super-simple and is something almost any desktop publishing software (like Pages) can do in a few clicks. But within a responsive, web design context, overlaying and offsetting different layers is mighty difficult to accomplish successfully. Ordinarily, the Stacks plugin cannot do it. So we developed the StandOut stack to bring this content presentation concept into the reach of average RapidWeaver users.
StandOut consists of two content layers; those being frontmost and backmost. Frontmost is the layer you can drop content (like images) into and layer or offset in relation to the backmost layer. In StandOut, you can choose to position the frontmost layer either top, bottom, left or right. Numerous options exist to fine-tune the placement and style of your StandOut stacks live in RapidWeaver. StandOut has been engineered to use pure HTML and CSS markup; so no Javascript, image shadows or Flash.
StandOut consists of two content layers; those being frontmost and backmost. Frontmost is the layer you can drop content (like images) into and layer or offset in relation to the backmost layer. In StandOut, you can choose to position the frontmost layer either top, bottom, left or right. Numerous options exist to fine-tune the placement and style of your StandOut stacks live in RapidWeaver. StandOut has been engineered to use pure HTML and CSS markup; so no Javascript, image shadows or Flash.
Please note that StandOut requires a minimum of RapidWeaver 6 and Stacks 3. This stack will not work with older versions of Stacks or RapidWeaver.
Examples
Here are some real examples of the StandOut stack in use; opting to demonstrate the top, bottom, left and right positioning options. In each example, the image in the frontmost layer has been set as a link.Setup
To get StandOut working in your webpage, please follow these instructions carefully.- Once installed into Stacks and RapidWeaver, add a Stacks page type to your project (if you've not done so already). Open the Stacks Library. Drag and drop a copy of StandOut into your page
- Where 'Drop stacks here' is shown, drag and drop a suitable content stack into this area; such as styled text, HTML code, Markdown, columns or a floating stack
- In the StandOut Frontmost Layer Settings, choose the content type (e.g. local image) and provide the content
- With your backmost and frontmost layers now populated with content, you can go-ahead and customise many other aspects of this stack. Keep previewing StandOut in RapidWeaver to see what it looks like. Settings like 'best fit' are important to customise, to gain the correct amount of overhang
- When finished, save your changes and export or publish your website.
You can safely use multiple StandOut stacks on the same webpage. It's often easier to setup the first one (to your liking) and then duplicate it. Within the duplicates, you can simply change the content and links etc.