P O P P E R

Make your content pop!

Popper stack

Popper stack is perfect for drawing the viewer's attention to particular areas or just used to break up solid blocks of content. It can be used in one of 2 modes: Framer and Divider.


Framer mode allows you to add a patterned area around any other stack(s) - creating a 'frame'.

You can also Framer mode for patterned backgrounds like used in the header section at the top of the page.


Divider mode lets you use your designed patterns as dividers to separate the content on the page.


All of the patterned areas / dots on this page have been added using Popper stack

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
Colour, style and positioning

Select colours that compliment your content and position your patterned elements wherever suits best.

Layering options

You can opt to add each pattern element under the added stack (default) or place it over the content.

You can create some really interesting effects by mixing up your approaches.

image
image
Create lines

By adjusting the width (or height) of Popper Blocks, you can create horizontal (or vertical) lines. These are much more flexible than adding borders, allowing you to control the length, width, quantity and also create overlaps etc.

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. Text boxes and quotes are good examples.

Note: The quote example here 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).

Text boxes

Bring your text boxes to life by adding patterned elements in ways that catch the eye without being distracting.

The options for pattern creation and placement are literally endless!

Create bold text boxes that will catch the eye of your web page visitors.

Allow the Popper pattern to be seen behind the content to give some really interesting effects!

Blobs

Popper - Blobs

Blobs are all the rage in web design. Adding them behind your content (or even making a full foreground feature of them) can really bring some well needed soft lines to otherwise stark web pages. They also inject a huge amount of colour and life into your content.

The Popper Blobs sub-stack could really be a stack in its own right but, as the blobs are really to make your content 'pop', we just decided to add it into the existing Popper stack.

Popper Blobs ships with 20 blob shapes and 8 regular shapes. You can even add your own custom paths if you are handy with creating svgs! All of this means that the options for what you can create with this stack are endless. Have a look at some of the cool things that you can do with Popper Blobs on it's very own Blobs Demo Site!

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 very top of this web page is an example of this (all of the little dots on the grey 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.



Squiggler 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.

v1.2 of Popper stack ships with a brand new companion stack: Squiggler. With this stack you can:

  • create squiggle dividers
  • target particular elements contained in the stack (or on the whole page) including:
    • links like this
    • spans <span>
    • horizontal rules <hr>
    • bold text <strong>
    • italic text <em>

In addition, you can set the squiggle to show at all times (default) or only on hover.

Squiggler also provides you with numerous styling options such as direction of squiggle, colour of squiggle, height of squiggle and speed of squiggle.

Squiggler is a great way to draw attention to particular content on your web pages.

Buy Popper stack

You can buy this stack on its own or as part of our hugely discounted stacks bundle (find out more).