Structure
Structure

A suite of responsive layout and design tools for building supremely flexible page designs in Stacks. Structure features responsive columns, grids, floated images and a whole lot more to make constructing responsive pages in RapidWeaver a breeze.

Columns Stack

Columns

The Columns stack allows you to create columnized layouts for use with responsive themes. It ensures that your content will look great and function as it should in a responsive environment.

The Custom Columns setting let's you build non-standard columns. You can also use the offset feature for changing the placement of the columns in this mode.

Be sure to watch our tutorial video for the Columns stack to see how it works and how to make use of these custom settings.

Grid Stack

Grid

This stack gives you the ability to place your content evenly in a grid format. The stack allows you to choose how many items are displayed on one line at each of the three break points.

The Grid stack is great for building photo galleries, or other content where you want to have a consistent number of items, such as an online storefront.

Be sure to watch our tutorial video for the Grid stack to see how it works and how to make use of its settings.

Margin Stack

Margin

Our Margins stacks allows you to set both a margin and padding for just about any page element. This margin and padding can be set to different sizes for each of the three breakpoints. This allows for dynamic layouts that adjust depending on your visitor's device or their browser width.

You can use a general margin or padding or use our detailed settings to refine to your liking.

Watch our tutorial video for the Margins stack to see it in action and get a feel for how it operates.

Visibility Stack

Visibility

The Visibility stack is simple, but quite powerful. It allows you to hide, or show, just about any page element at each of the three break points.

This allows you to present specific content to your visitors based off of their device or browser's width. This can be handy when you have specific content to serve up to your mobile visitors for instance.

Our Visibility tutorial video shows how it works and how to make use of its simple settings.

Float Stack

Float

This fun little stack operates much like the Floated Image stacks that come with Stacks, with the exception that these are responsive.

You're able to set breakpoints for when you want your floated image, or pull-quote, to stop floating and place themselves above your text, full-width. You can also adjust the floated elements margins at each breakpoint.

Watch our video for the Float stack to learn how it works and how to make use of its settings.

Image Stack

Image

The Image stack helps in making your images responsive. While the Columns, Grid and Float stacks all make your images responsive on their own, scaling down your images to fit within their elements, this stack allows you a few more options.

It can be used to make your image responsive in others stacks, which don't provide responsive scaling natively. It can also be used to upscale images to fill out space.

The Image tutorial video shows how it works and how to make use of it on your responsive pages.

Animations

Both the Columns and Grid stacks offer built-in animations that can be toggled on or off for each iteration of the stack on the page.

These animations are triggered by your visitors as they scroll down the page discovering new content, much like how our Animagic stack works.

Requirements

The Structure suite of tools requires RapidWeaver v5 or above and the Stacks plugin v2 or above.

Columns

Columns

Grid

Grid

Margins

Margins

Float

Float

Visibility

Visibility

Image

Image