POCKET BAR STACK
RW8/Classic & Stacks 4/5

changelog


Cart
Stacks Image 113448

Stack "Pocket Bar"

Buy Pocket Bar
Stacks Image 113326
Stacks Image 113155
Stacks Image 113159

Info Box with Progress Bar, Mini Nav & Footer text

Version 1.0.0 RW 7/8/Classic & Stacks 3/4
Browser: Microsoft Edge / Chrome / Firefox / Safari / Opera / Brave.
Pocket Bar is a smart sliding box section with contents and a scroll indicator. This stack provides a progress bar which keeps on changing as you scroll through the whole page.
It is even responsive! Resize the browser window to see the effect.
 Drop Images Here 

Stacks Image 113181
Stacks Image 113191
Stacks Image 113183
Stacks Image 113185
Stacks Image 113187
Stacks Image 113189
Stacks Image 113193
Stacks Image 113197
Stacks Image 113207
Stacks Image 113199
Stacks Image 113312
Stacks Image 113201
Stacks Image 113203
Stacks Image 113205
Stacks Image 113211
Stacks Image 113209
Enter the name for this tabbed section:

STACK INFO

Stacks Image 113341
Highlight your important content! Timetables, phone number, Promo and more, immediately and in a small space.

Multiple Contents

You can show 4 contents selectively on desktop and mobile devices

1: Progress bar

ON/OFF. Full height or small size, Top or bottom position. Fill the bar with a single colour or a animated gradient, also with image or Gif.

3: Drag your content

SHOW/HIDE you can drag any other element such as text, images buttons and more.

2: Mini Nav

ON/OFF. Compact Navigation of your project with first level only.
Customize font Style, size and colours.

4: Footer Text

ON/OFF. Shows the standard Footer text of your project, customize text size and padding

Responsive

This stack is completely reactive. Controls the Pocket-Bar position Top/Bottom, the Slice in Desktop/Mobile and the Text Size on mobile

Animations

This stack allows you to set more than one effect for the Progress Bar. Animated Gradients or Gif.

Dashboard

A dashboard is available in Edit Mode with basic settings, the settings changes are reflected in the UI. You Can show/hide the preview for BG images.

Layout Options

Stacks Image 113331
Enter the name for this tabbed section: GENERAL SETTING

Features

You can only use one Pocket Bar per page. Tip: With stacks you can create a partial and use the same element on all pages
Preview & Edit Mode setting
 
Stacks Image 113379
Responsive setting
 
Stacks Image 113387
Footer Content
Project Footer content
 
Stacks Image 113395
Slice setting
     
- Show/Hide Elements
- Customize styles
- Customize Font style
Stacks Image 113406
Progress Bar Style
    +     +  
Stacks Image 113558
Progress Bar.
- Single or double colours
- Animated background
- Drag image from resources / URL
Stacks Image 113417
Mini nav
First leve only, no submenu
   
Stacks Image 113425
Enter the name for this tabbed section: EDIT MODE

Edit Mode

Stacks Image 112501
Enter the name for this tabbed section: FAQ

Smooth Animation

How to increase performances?

Choose the best combination between filters, filling method and animation.
You should try the animation in more than one browser, the stack deliver "cross platform web fonts" and the result is quite identical in all browsers.

The features requiring more resources are:
- CSS filters over the BG like Blur (or you can use 2 images)
- Background with animated GIF over morphing shapes in animation.
- Background with video or similar.
- Further css filters applied to the stack with nested stack.

External GIF

How to apply a custom gif?

Go to GIPHY, you can find cool gif for the stack.
- Go to Giphy and select your favorite GIF
- Click to "Copy Link" and select "GIF Link"
- Copy and paste this URL in the field
Stacks Image 113078
Stacks Image 113080

Giphy site

Stacks Image 113073

Stack Panel / IMG

Load images

How to load a Stacks4 "site image" in this stack?


- Publish the project ( to upload all "site images").
- In RW copy the URL from the Thumbnail in Resources panel.
- In the Stack Paste the image path into the URL field.
Stacks Image 111907

RW: Resources panel / site image

Stacks Image 111914

Stack: external "URL image"

Compatibility

Can I use this Stack within other stacks?

Yes, you need to check that the animations are loaded on the main page; Stacks with lightbox or modal windows are not compatible.