Stacks4Stacks

Headers and banners are an important component of many website designs; mostly because they are one of the first things people see above the fold. It's important that you grab the attention of your website users. However header or banner images on their own can sometimes consume a lot of valuable space; so it's often better to combine a large static image with some overlaid content, where possible.

Unfortunately overlaying static images with content is not as simple as it may appear. Considerations have to be made towards the content type, sizing, positioning, layering and the inevitable problems of trying to get things to fit on smaller screens! Our BannerStack aims to make the entire process extremely fast and simple. BannerStack gives you a lot of creative freedom to build impressive theme headers or banners that not only look decent, but are useful too!

Although some may simply consider photoshopping text or other content into an image, this typically caries the problem of content becoming impossibly small to read as the screen width reduces. Sometimes it may only be necessary to display some content over an image (like in the format of an advertisement or message) on a temporary basis. And SEO (search engine optimisation) also needs to be given consideration; for the simple reason that search engines cannot read text that is embedded within an image file. Keeping images and other content separated (as we do in BannerStack) caries a number of significant benefits over other methods.

Note This stack element requires RapidWeaver 6 or later and Stacks 3 or later. BannerStack is not compatible with older versions and will not function correctly. The FreeStyle and ExtraContent embed methods require a conventional RapidWeaver theme with support for either technologies.

Examples

Here are some examples BannerStack in use, starting with the default settings:
 

 
With transparency applied to the banner layer:
 

 
Two banner layers with different colour schemes applied:
 

 
Corporate style, with different layer styling applied for a more formal appearance:
 

 
A text box with larger text, more padding, rounded corners and a border applied:
 

 
A simplified setup with the text box set to centre alignment, together with the internal text:
 

 
Same as the above example, but with some rotation applied to the layer:
 

 

Setup

Follow these instructions for getting a BannerStack working in your webpage:

1. Once installed into Stacks and RapidWeaver, open your Stacks library and drag-and-drop a copy of BannerStack into your webpage
2. Opt to use either a local or warehoused image as the canvas background
3. Click the blue '+' button to add a new banner layer
4. Drag-and-drop content or additional stacks into the new banner layer you just created
5. Use the separate settings for the layer to change its sizing, position, breakpoint, z-index and styling. Most people find it easier to select the layer in RapidWeaver Edit Mode, preview the webpage and then adjust the settings to see them take effect live
6. Select the main BannerStack in edit mode and change the stack placement between either the existing page flow, a theme ExtraContent container or a FreeStyle banner container
7. Continue to add any further layers if required. Preview and publish your webpage when done.

It is normal for it to take some time (in certain setups) to fine-tune the BannerStack and get it displaying your content exactly how you want. Remember to test your BannerStack on different screen sizes and ensure there is a good level of clarity between text and background images or layer fills at all times.

Banner sizing and images

The BannerStack will stretch horizontally to fit the width of whatever page area it's placed within. The height of the BannerStack is controlled by the size of the image you place within the stack as the canvas background. Images should be in either JPG or PNG format, saved at 72 dpi and optimised with a tool like ImageOptim (for faster loading). Alongside the image you use for standard resolution screens, it may be desirable to also create a retina optimised version of the same image (normally this is twice the dimensions of the standard image and includes @2x in the file name, immediately before the file extension). All newer ThemeFlood themes include built-in support for retina images already - see the theme documentation for details.

Responsive support

As the screen becomes narrower, the banner width and height reduces too. Eventually there comes a point where the layers will no longer fit on the image (they will either overrun each other or become cropped). This is where you use the Breakpoint setting on each layer. If the screen width is less than the specified breakpoint, the layer will have it's styling removed and the content reflows to be positioned below the banner image. Written content will inherit your theme styling, below the breakpoint. In extreme situations, you can also make use of the free UsefulStack to completely remove BannerStack on certain screen sizes.

 

Contribute

If you find this stack element useful in your personal or commercial web projects; please consider making a small contribution towards ongoing support and updates. There are many different ways you can contribute to the Stacks4Stacks project, and benefits for doing so.