POP DISPLAY STACK
RW 7/8 & Stacks 3/4

changelog

25% off
19.00€
14,25€

Cart
Style 1 | 2 | 3 | 4 | 5 | 6 |
Stacks Image 113155
Stacks Image 113159
PopDisplay Stack

Animated videos & images

Version 1.0.0 RW 7/8 & Stacks 3/4
Browser: Microsoft Edge / Chrome / Firefox / Safari / Opera / Brave.
A creative tool for displaying images and videos. A new way to present video content and images with links. Customize Fonts, graphics and the animation in a simple way
Enter the name for this tabbed section:

STACK INFO

Stacks Image 113260
Stacks Image 113264

VIDEO

Stacks Image 113248
Stacks Image 113244

IMAGES & GIF

Stacks Image 113273
Stacks Image 113270

6 Screen Styles

You can use 6 styles, 16:9 + 4:3 with Left, Center and Right rotations. Trigger rotation by scroll or with mouse over.

Animations

This stack allows you to set more than one effect at the same time. Scroll and rotation can be combined in different ways. Start animation automatically or in view.

Responsive

This stack is completely reactive, you can set selectively the breakpoint, From Wide screen to a smartphone.

Simulator in Preview

The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and Viewport triggers.

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.
Enter the name for this tabbed section: GENERAL SETTING

Stack Options

Preview & Edit Mode setting
 
Stacks Image 112559
Stacks Image 112976
Stack Background
    +     +  
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL
Stacks Image 112571
VIDEO Content
    +  
Stacks Image 112986
Stack Animation
Stacks Image 112586
Test: Style and Webfont
 
Stacks Image 112604
Responsive setting
     
Stacks Image 112621
Multiple Heights
Sets the height of the box selectively.
IMG Content
    +     +  
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL, also a published "site image" (Stacks4 ) in your project.
Stacks Image 112633
 
Add a link with Animation
Enter the name for this tabbed section: EDIT MODE

Edit Mode

Stacks Image 112501
Stacks Image 112859
A dashboard is available to ensure ease of use. The settings changes are reflected in the edit mode UI.
Options: Show/hide images, You can also minimize the panel to save space in edit mode.
Enter the name for this tabbed section: PREVIEW

Smart Preview

Stacks Image 112450

The simulator is visible only in preview. It helps you with text adjustment, the breakpoints checking and more.

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.

Google Fonts

How to apply Google Fonts to title?

The external fonts you may upload by google, must be always tested and we cannot guarantee the correct rendering of the fonts in all browsers; it depending on the font that you use.
Stacks Image 113093

Google site

Stacks Image 113088

Stack Panel

- Set "Custom font" in the Stack
- Go to https://fonts.google.com/
- Select yoru favorite font
- Copy and paste the font name
Note: The External font is not visible in the dashboard in "Edit mode". Only built-in fonts are visible in "Edit mode".

Google Fonts Variations

How to edit theGoogle Fonts Weight?

In Google Font you're able to choose the thickness of the web-font.
Some fonts don't support all weight variations, so you have to check in GoogleFont Site which is the right set for each font.

  IMPORTANT NOTE: With the wrong weight the character is NOT displayed correctly. This is not a bug. Many fonts in Google have no variations but only the default value. Check carefully and set the right value.

Font weight setting in Google Fonts
Compare two different thickness settings

Stacks Image 113117

Font with some specific styles + Italic
This Font works with THREE styles only

Stacks Image 113111

Font with just one style + Italic
This Font works with ONE style only