Cartloom Script

RapidWeaver Stacks

RapidWeaver Stacks

RapidWeaver Stacks

RapidWeaver Stacks
RapidWeaver Stacks
RapidWeaver Stacks
RapidWeaver Stacks
RapidWeaver Stacks
RapidWeaver Stacks

RapidWeaver Stacks

RapidWeaver Stacks

Multi Layer Stack

Layer text, images, buttons, movies
RapidWeaver Stacks add-on info:
Layer all kind of different stacks. Text, logo, image, buttons, movies, slideshows on top of a… text, logo, image, buttons or movies. One layer that centers the content within the frame and 4 other layers you can position anywhere within the Stack.

You didn't think this could be done with RapidWeaver + Stacks – that easy!

But that's not all. Working with layers – you need to think responsive. What will happen when viewed on smaller screens – mobiles? You got all the settings to make everything look perfect on mobiles too. You can hide or scale stacks added as layers!

It's great for:
Banners, headers, images with captions, slideshows or movies with text, images or buttons on top. Well – it's just great!

The example below – buttons and an image on top of a video – comes with the MultiLayer Stack along with the HiTuber Stack (free).

Special features:
Option to animate the four 'other layers'. FastPicker adds default Stacks with the click of just one button. Add a text stack – then move it to the right position. Faster than picking Stacks (like buttons) from the Library.

Keywords:
RapidWeaver, stacks, responsive, layer, position, animation.
Stacks settings:
Stacks Image 512858
Stacks Image 512860
MultiLayer Stack (NEW)
Stacks Image p626908_n9
Multi Layer Stack – it's the original Layer Stacks (2700 copies sold) + extra layers + smooth animations + responsive settings. It's super cool!

(INTRO DISCOUNT: 25%)
Example
The MultiLayer provides you with up to not less than 6 layers + a background layer + an option to position four of the layers within the MultiLayerStank The four buttons) + center the last Layer (icon and text).

If this is not enough – should cover most, I think – you can even add a background image.

The MultiLayerStack provides you with great control to make things work om mobiles too. This is often the issue when working with layered objects.

Layer stacks on stacks on stacks or… text or buttons on images, videos, slideshows or…

But that's not all. If you add an image to the MultiLayer Stack – the MultiLayer Stack provides you with options to reposition or rescale the image on mobiles to make it look perfect. This is often a problem when you deal with responsive websites – images gets too small or scaled out of the frame. Those days are over – happy days are back.

And that's not all. If you want to use the MultiLayer Stack as a banner – you'll find some nice features that'll add a little extra spice. You can but don't have to add other animation stacks. There's a few nice animations added to the MultiLayer Stack (see the pulse-animation).
Walk Through – Step by Step

WorkMode

Settings in WorkMode only affects the way things look and work in Edit.

Stacks content (will remove the floating layers and push them below).
Hilite layers will add a color above layers 1-4.
Fast picker adds an easy way to add default stacks below the MultiLayer Stack.
Stacks Image 626937

Dimentions & Default Layer

This is the default layer – static background layer. Here you would probably add an image or video. Maybe a slideshow stack.

Min & Max Height can be used to define a min height, that the entire Stack won't dive below – or a max-height. Useful when working with floating layers.

Resposition (up/down): If you've added an image you can reposition the image instead of using Photoshop og similar. But be careful. Depending on the shape of your image (wide - tall) you can't adjust too many %. Cropping in Photoshop is probably the safest solution.

If you use the reposition-feature you should see the BreakPoint settings and adjust the repositioned image on smaller screens (below your BreakPoint).
Stacks Image 626956

Layer 1-4

This is the fun part. Layer 1-4 behaves the same, has the same options but can be positioned on top of your default layer – your background stack (image, video or slideshow).

Turn the layer on (check it).

Position: You can turn on top, bottom, left or right position. You should probably choose between either top-bottom and left-right. Define the distance in % from the edges.

Max Width: If you have more than of the four layers turned on you might need to define a max-width for the layer.

You should always have in mind that small smartphones have a width from 320 px. But the Stack will help you – if you go to the BreakPoint options and turn on BreakPoint you'll be able to redefine the max-width and you'll be able to scale the Stacks you've added to layer 1-4.

The 'Center' option allows you to override the 'Position' and center the added Stack in the middle of the MultiLayer Stack.

Last but not least the 'Entrance'-option. How would you like the Stack to be introduced on the website? FadeIn or Blur+Slide? You can of course add other Stacks that animate the entrance if you thing the options are too limited.
Stacks Image 626967

Layer 5 (Center)

This layer centers in the middle of the MultiLayer Stack both horizontal and vertical.

Entrance: Works like layer 1-4.

Width: You can define a width for content added – stacks or an image.

But hey! Why a centred layer 5 if you can center layer 1-4 too? Well, maybe you want one of the four layers on top of Layer 5? Maybe a button on top of a product or…

Do I really need 5 or 6 layers? Probably not! Enable those you need, uncheck the rest.
Stacks Image 626977

Layer Styling

Turn on Styling for one or all of the four floating layers (layer 1-4). Depending on how many you use.

The z-index value defines the stack order. Higher value get's to be on top.

Radius + padding + color + shadow style: Defines the look of the layer if turned on above.

The 'Pulse Ani' allows you to add a small animation to the layer to catch attention to that layer – or maybe all.
Stacks Image 626987

Headlines

If you add a headline to the MultiLayer Stack – probably Layer 5 – you can style it here.

Choose which Headline Tag you want to style within the MultiLayer Stack. The default Headline Stack starts with H3, but you can change that.
Stacks Image 626997

BreakPoint

This is always the toughest part of working with advanced layered content (stacks) – how does content behave when viewed on smaller screens with only little screen space.

Though this design stage you should test a lot. It's like Edit, preview, edit, preview, edit… until thinks looks perfect on both the computer, the tablet and smartphones.

Your options: Turn on the BreakPoint. What should happen with the content below the BreakPoint? This is what we define here.

Min & Max Height: Here you can refine the settings from 'Dimentions & Default Layer'.

Hide / Scale down: You can choose which layers to hide on smaller screens or which layers to scale down (5).

Layer 5 (Special): Here you can redefine the max-width settings from 'Layer 5' below BreakPoint.

Test thoroughly.
Stacks Image 627007
Stacks Image p185988_n559322
DEFLIGRA.COM

Hi. I'm DeFliGra. A long time developer of RapidWeaver Stacks Addons called Stacks. I've been an even longer time user of RapidWeaver and came on board when RapidWeaver 3 was released.

All RapidWeaver Stacks Addons requires the Mac OS desktop app: RapidWeaver by Realmac Software and the RapidWeaver plugin Stacks by Yourhead Software.

All Stacks are downloaded as Zip-files. To install unzip and double click the Stack.