Popper Stack

Make your web content pop!

Popper Features

Popper stack enables you to bring a great deal of visual interest to your RapidWeaver web pages by allowing you to add patterned areas to (or between) your content.

Visual interest

Draw attention to key areas of content and break up the monotony of solid rectangular blocks

Align messaging

Use colours (or pattern styles) to visually align related content elements

Get creative

Control every aspect of the patterns with regard to shape, size, colour and positioning

Lightweight

Uses efficient SVG code to create the patterned elements

Popper Patterns

Popper offers three basic pattern elements: Dots, Blocks, Checks and Lines. You can add any of these (and any combination of these) to either 'frame' some of your page content or to divide your content.

The 4 default Popper patterns are:

You can fully control the size of the pattern, the size of the pattern shapes and the colours used. All of the examples in this section are 300px x 20px in size but the patterns can be any size at all (using either px or %).

Get creative

These options (along with the ability to 'layer' your pattern elements) means that there is a lot of scope to get creative! Here are a few examples but the possibilites are endless.

Framer Mode

In 'Framer' mode, Popper stack allows you to add a pattern (either dots or squares) around any other stack. These patterns frame the content and allows you to draw attention to areas of importance. It can of course just be used to break up the monotony of flat content and to bring areas of enhanced visual interest to your pages.

You can add as many different patterns to a single stack and for each you can choose for it to appear in any of the following positions (in relation to the added stack content):

  • Top-Left
  • Top-Right
  • Bottom-Right
  • Bottom-Left
  • Centre

Make your images pop!

Popper works especially well with images and allows you to bring flashes of colour with your patterned elements to break up solid blocks / rectangles.

image
image
image

Make your anything pop!

Popper is probably best suited to use with images however it is great for any piece of content (any stack / group of stacks) that you want to draw particular attention to. Quotes are a good example. This particular example uses nested Popper stacks, one to frame the quote and then another to frame the frame (i.e. with the dots on the top and bottom).

Good design is like a refrigerator—when it works, no one notices, but when it doesn’t, it sure stinks.

Irene Au

Framer - Backgrounds

When in Framer mode, you can set the size of any patterned area to be 100% x 100% meaning that it will fill the full area behind any added content. This means that you can use this approach to add a full background pattern.

The header area at the top of this web page is an example of this (all of the little dots on the blue background have been added using Popper stack).

Likewise, all of the content for this section has been added to a Popper stack and a checkerboard pattern has been added.

Divider Mode

As well as being used to 'frame' content blocks on your page, Popper stack can also be used to design and create dividers that you can use throughout your page to divide sections of content. Dividers are great as a visual indicator of where a change in content occurs and can help visitors to your page better understand how your content is structured.

Like has already been shown, the pattern building possibilities are limitless. You can create as simple or as complex a divider as you wish to. What is shown below is simply a very brief and limited showcase of a few options.

Stack Settings

Popper Stack (Parent)

The parent stack simply allows you to choose whether Popper stack will perform in either 'Framer' mode or 'Divider' mode.

If Divider mode is selected then you are given an additional option to specify the height of the divider. This value can be given using any appropriate units. The default value is 20px.

Popper Stack (Pattern)

Note: This example shows the 'Dots' pattern child stack but each of the available pattern stacks work in the same way. There are a few differences in the 'Pattern Maker' settings for each however these will all be self-explanatory.

You can add as many Popper child stacks to each parent as you wish.

Size / Placement

Dimensions: Select the width and height values. The default settings are for pixels (px) however if you wish to use percentages then check the box(es) below.

Reflect height in Edit mode: By default, the pattern in Edit mode is restricted to 60px in height. If you wish for the pattern to reflect the stack settings then check this box.

Placement: You can opt to place each pattern element in relation to the contained stack(s). i.e. Top-left, bottom-right etc.

z-index: The default is 0 and this places the patterned element behind any added content. If you wish for it to appear above the content then you can raise this (e.g. to 1).

Styling

Colour: You can select the colour of the pattern. This option supports opacity.

Padding: You can apply some padding to start your pattern at an inset.

Pattern Maker

The options here will make most sense when you start playing with them. All changes are reflected in Edit mode and therefore you can see exactly what each setting effects.

The example project has more information about these and also has all of the examples from this page.

If you appreciate this stack then please leave a rating and/or review on the RapidWeaver Community site

Popper stack

Image

Buy Popper stack

You can buy this stack on its own or as part of our hugely discounted stacks bundle.

or

View our stacks bundle

Shaking the Habitual

Stacks Bundle

Like the look of our stacks? You can buy them individually or get them all for one hugely discounted price. Buying the bundle will save well over 50% on the cost of buying them individually.

View all the stacks included here

What about future stacks?

It's annoying buying a bundle only for new stacks to be released in future. That's why we at Shaking the Habitual will send all bundle purchasers their own unique 50% discount voucher* that is good for every new stack that we release in future.

My Image

* Please allow up to 1 week for delivery of discount code

© Shaking the Habitual
Let us know if you agree to cookies

We use cookies to give you the best online experience. Please let us know if you agree to the use of all of these cookies. You can read more about the cookies we use, and all other aspects of data use and privacy in our Privacy Policy.

SCROLLER PLUS DEMO

Double mode

There are 2 blue lines - one above the Nav Bar and another below. These both move from left to right until the bottom of the page is reached. And here is another example of Scroller Counter too:

Amount seen: 0%