Stacks4Stacks

A key advantage of using TintStack is its ease and simplicity towards designing and deploying gorgeous looking theme banners to grab the attention of your website visitors. There are numerous benefits of using TintStack, including...

• Place the stack in the normal page flow, a theme ExtraContent container or a FreeStyle banner
• Toggle between using an image dragged and dropped into Stacks or an image published online already
• Control the sizing and of the image, within TintStack
• Optionally make the background image 'fixed' to create a simple parallax scrolling effect
• Full control over the tint opacity and colour, using some settings in the stack
• Adjust the padding and maximum width of the content you place inside TintStack
• Optionally set the entire TintStack as a link to a page anchor, another page, a resource or an external site
• Use one or more TintStacks safely in the same page
• -Excellent print and PDF output, plus emphasis on improved SEO

TintStack requires Stacks 3. We recommend the use of TintStack in a quality HTML5 responsive RapidWeaver theme, like the free and paid themes we provide through the ThemeFlood website. Any basic stacks, columns, grids or images can be dragged and dropped into a TintStack. In RapidWeaver themes that incorporate the Bootstrap framework, you can also add additional interface elements like, call-to-action buttons and headings. Font Awesome Icons are also feasible in themes that support them.

Examples

Here are some examples of TintStacks, with different background images and overlay colours applied. We placed the TintStacks inside a free UsefulStack to constrain their maximum width to 1000px wide, but ordinarily they will span the full-width of whatever area of the page they're placed within. Bootstrap buttons are used for the 'learn more' links.

 

Setup

TintStacks are very easy to get setup in your websites...

1. Once installed into Stacks 3, drag and drop a TintStack into your page
2. In the TintStack settings, choose between using a local image (dragged and dropped into the image well shown) or link to a warehoused image stored online
3. Customise the position of the background image
4. Change the overlay colour and / or opacity in the TintStack settings
5. Drag and drop content (like styled text, HTML code or markdown) into the TintStack, within the page
6. Preview your page. Publish when ready.

You can safely use multiple TintStacks in the same page. A couple of semi-advanced features are also support in TintStack, like the ability to make the background image fixed (so it does not scroll), the option to apply a link to your TintStack and options to embed TintStack directly into theme ExtraContent or FreeStyle banner containers (the latter options remove the need for placing TintStack into additional stacks).

 

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.