Images should be in either JPG or PNG format, saved at 72 dpi and optimised with a tool like ImageOptim (for faster loading). The height of the BannerStack is controlled by the size of the image you place within the stack as the canvas background. 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.īanner sizing and imagesThe BannerStack will stretch horizontally to fit the width of whatever page area it's placed within.

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. Preview and publish your webpage when done. Continue to add any further layers if required.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.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 Use the separate settings for the layer to change its sizing, position, breakpoint, z-index and styling.Drag-and-drop content or additional stacks into the new banner layer you just created.Click the blue '+' button to add a new banner layer.Opt to use either a local or warehoused image as the canvas background.Once installed into Stacks and RapidWeaver, open your Stacks library and drag-and-drop a copy of BannerStack into your webpage.SetupFollow these instructions for getting a BannerStack working in your webpage: The FreeStyle and ExtraContent embed methods require a conventional RapidWeaver theme with support for either technologies.ĮxamplesHere are some examples BannerStack in use, starting with the default settings: BannerStack is not compatible with older versions and will not function correctly.

Note This stack element requires RapidWeaver 6 or later and Stacks 3 or later. Keeping images and other content separated (as we do in BannerStack) caries a number of significant benefits over other methods.

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. 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.

BannerStack gives you a lot of creative freedom to build impressive theme headers or banners that not only look decent, but are useful too!Īlthough 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. 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. Unfortunately overlaying static images with content is not as simple as it may appear. 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. It's important that you grab the attention of your website users. 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.

Rapidweaver seo