Image
Stacks add-on

Capsule

Capsule allows you to place content on your pages that can be shown and hidden by your visitors using stylish toggles. Use multiple content sections and multiple toggles to control your content.

This page outlines the settings included in the stack and looks at what they do, and how they affect the its functionality. In addition we have a tutorial and walk-thru video below that helps get you started using the stack, as well as gives you an idea what the stack can do before your purchase. For examples of the stack in action, please visit the product page.


Let's have a look inside Capsule's many settings

Below we take a look at what each setting within the Capsule stack does. This page is a good reference as you work with the stack, as well as it provides an inside look at each setting within the stack before you make your purchase.

Capsule is broken down into two stacks, a content stack and a toggle stack. We'll look at each separately.

Capsule Toggle stack

The toggle stack is what you use to add interaction with the visitor. It is the stack that will allow you to create toggles, which the visitor clicks on to open one or more Capsule Content stacks.

Image

General

ID
When configuring our Capsule stack we need to give the Toggle, and its associated Content stack, a unique ID. We want the ID for the toggle to match the ID for the content we wish to have it trigger. This ID is how the two stacks know to talk to one another.

START OPEN
When enabled the Content stack associated with this toggle will begin in the open state.

CLOSE OTHER CAPSULES
If you enable this feature the Toggle stack will close all other Capsule content stacks on the page when it send the signal to open its associated Content stack.

Image

Label

USE CLOSED LABEL
This feature allows us to enable / disable the label that is added to the Toggle when the Content stack associated with this Toggle is closed. When enabled you're given a field into which you can customize the label's text.

USE OPEN LABEL
This feature allows us to enable / disable the label that is added to the Toggle when the Content stack associated with this Toggle is open. When enabled you're given a field into which you can customize the label's text.

LABEL COLOR
Allows you to customize the color of the label text for both the Open and Close text.

LABEL SIZE
Use this setting to customize the font size of your labels.

Image

Toggle

TYPE
Choose whether you'd like to use an icon provided by the stack's FontAwesome icon font or your own image files. Each of these two types will have their own associated settings for choosing your FontAwesome icon or placing your custom images.

The Icon setting also give you a font size and color setting as well.

ALIGNMENT
Allows you to pick whether you want the icon or image to be aligned to the left, center or right.

Image

Animation

DURATION
The allows us to set the amount of time it takes for the animation to complete. The longer the time, the slower the animation.

ANIMATION TYPE
This setting allows us to experiment with different types of animation easing. Most times the default will suffice for Capsule animations. You can experiment with the type and duration together to get different effects for the opening and closing animation.


Capsule Content stack

Our Capsule Content stack is what you'll use to add your content to the page that you wish the visitor to be able to hide and / or show via clicking on the Capsule Toggle(s).

Image

General

ID
When configuring our Capsule stack we need to give the Content, and its associated Toggle stack, a unique ID. We want the ID for the content we wish to have it trigger to match the ID for the toggle that will be clicked to open it. This ID is how the two stacks know to talk to one another.

Image

Content

PADDING
We can use this setting to add padding around the content within the Content stack. If you're using a framework like Foundry you can forego this setting if you like and use a Margins stack to add padding at each of the three different breakpoints if you like.

INSET SHADOW
Add a decorative, inset style shadow to the content to give in a styled design that looks as if the content is sunken into the page.

On this page