SOLID STACK
RW 7/8 & Stacks 3/4

changelog

17.00€


Cart
Stacks Image 112283
Stacks Image 112540
Stacks Image 112543
Stacks Image 112546
Stacks Image 112549
Stacks Image 112552
Stacks Image 112673
Stacks Image 112675
Version 1.0.7 - RW 7/8 & Stacks 3/4- Browser IE11+ / Chrome / Firefox / Safari / Opera / Brave
Animations with Waypoints & MouseHover

Banner and boxes rotation in RapidWeaver


Solid is a versatile Stack that allows you to make a cool looking 3D animation of your banner. Simply choose the animation, customize the text, drag and drop in your images and your logo.
Over 60 templates for endless combinations. The stack deliver also a project for demostration of your logo with several examples, included projects for all
RapidWeaver frameworks
 Drop Images Here 

Stacks Image 112570
Stacks Image 111273
Stacks Image 111251
Stacks Image 112317
Stacks Image 112772
Stacks Image 111255
Stacks Image 111259
Stacks Image 111253
Stacks Image 111289
Stacks Image 111269
Stacks Image 111261
Stacks Image 111287
Stacks Image 111275
Enter the name for this tabbed section:

STACK INFO

Hype & Stacks


The HypePro based Stacks is the next generation of packages with original contents for RapidWeaver. All animations are designed exclusively for Stacks.

Perfect Retina


Based on "SVG" and "Vector shapes", powered by JavaScript, work in all modern browsers and look perfect at any devices. Yes, Retina too.

Fitting to your style


Creating original contents and interactivity for users is the main purpose of this stack. With this stack you can Highlight the content inside the column.

Animations


This stack allows you to set more than one effect for the viewport setting. Start with static shape, Start with animation "in view" and customize the second animation (on exit).

Place your Image


You can change image size proportionally or with fixed size in pixel in both layouts. You can resize the image accurately.

Responsive


This stack is completely reactive, you can set selectively the breakpoint, From Wide screen to a smartphone (depending on the model you choose).

Simulator in Preview


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

Max-Width Height


Depending on the model you choose, you can set a maximum width or height. The height can be variable or fixed and you can selectively set the value with breakpoint.t.

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
Template setting
 
Stacks Image 112135
Border / frame
Stacks Image 112712
Text customization
 
Stacks Image 112157
Add link
Stacks Image 112229
Border
Stacks Image 112778
Gradient
Stacks Image 112468
Animations: 7 templates
Stacks Image 112720
Stacks Image 112723
Stacks Image 112726
Stacks Image 112729
Stacks Image 112734
Stacks Image 112737
Stacks Image 112740
Stacks Image 112644
ICON or PNG
Stacks Image 112142
Awesome icon with the Built-In Stack library or an image like PNG
IMG A
    +     +  
Stacks Image 112276
IMG B
    +     +  
Stacks Image 112646
BG Blending
Stacks Image 112784
Enter the name for this tabbed section: EDIT MODE

Edit Mode Responsive UI

Stacks Image 112072

Options: Show/hide images

Stacks Image 112074

Note: You can also minimize the panel to save space in edit mode.

A dashboard is available to ensure ease of use. The settings changes are reflected in the edit mode UI.
Enter the name for this tabbed section: PREVIEW

Smart Preview

Stacks Image 111871
Stacks Image 112500

viewport trigger & slider

The simulator is visible only in preview.

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 with complex animation style.
- 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 112171
Stacks Image 112173

Giphy site

Stacks Image 112178

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 112396

Google site

Stacks Image 112401

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 112418

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

Stacks Image 112423

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

  WebFonts and Browser Compatibility

All the fonts embedded in the stack, including special characters and punctuation marks, have been tested. however some styles may be rendered differently by each browser.
  Safe fonts and Browser Compatibility

Even if compatible some "Safe Fonts" are rendered differently in some browsers. Some "Safe Fonts" are not available by default on iOS and Android devices and they will be substituted by browsers on these devices as it is a licensed font from Microsoft.

EXPLORE STYLES
Examples ready to use