ZipBar was originally developed by SeyDesign. This stack is now supported and maintained by Stacks4Stacks. The newest version is denoted with an orange and white icon. Legacy versions of ZipBar are listed for download from the archive page if you are a previous user needing an older version.
Example
This is a working example of ZipBar with the default style and behavioural settings applied. The shadow box effect surrounding the stack is accomplished using the free Shady stack.Setup
This stack element requires RapidWeaver and the Stacks plugin. It is not compatible with other publishing platforms like Wordpress. Configure ZipBar in just a couple of easy steps.- Download ZipBar. Unzip the package. Drag-and-drop the ZipBar stack onto your RapidWeaver dock icon to install.
- Follow the onscreen instructions to install ZipBar. Restart RapidWeaver if prompted.
- Open your Stacks Library. Search for ZipBar. The latest version has an orange and white icon.
- Drag a ZipBar stack element from your Stacks Library onto your Stacks page.
- Double-click on each "Button Title" to give each button name.
- Drag other stacks into each available content space and propagate each item with text and media as needed.
- Add more tabs by clicking the blue button in edit mode.
- Make other adjustments like animation effect, gradient, shadow, radius and colours.
- Preview your page when done. Save changes. Export or publish your website in the normal way when done.
Browser compatibility
ZipBar is compatible will all major web browsers. On narrower screens (like smartphones and smaller tablet devices) the tab buttons are stacked vertically. You can control the point at which the tabs revert from horizontal to vertical positioning through use of the breakpoint setting in the ZipBar settings.Setting a tab as a web link
You don't have to have a tab configured to reveal a panel of content underneath. You can instead configure the tab to open a resource or another webpage when clicked. The trick is to markup your tab title as an HTML link:<a href="https://example.com">My Link</a>
Now when the user clicks on the text 'My Link', they will be navigated to a web address like https://example.com. You can change the web address to be anything you prefer.
Privacy Settings
You are welcome to change your privacy preferences here.
By using this website, you agree to the privacy policy