1LD Tutorials & Blogs

Tutorials

Setup

To get started, add the Index Cards stack to the editor.

Initially, there are two elements. The main Index Cards stack wraps a single inner Index Card stack. The main stack is essentially a slider or slideshow with the inner stacks serving as the slides.

Click the blue add button to add as many slides (Index Card stacks) as you need. Next add your desired content to each of the slides. Just about any stack can be added as content to the slides.

The only thing left to do is to customize the appearance and functionality of the slider. Select the main Index Cards stack and open the inspector to see the customization settings.

Customization Settings

Index Settings

Direction

Select one of four different animation directions. When the slider moves to the next slide the current slide will move in the chosen direction. If the slider moves to the previous slide the animation will reverse.

Card overlap

The edge of the next two slides will always be visible when using the Index Cards stack. This setting allows you to adjust how much of the next two slides is visible behind the current slide.

Transition Speed

This setting adjusts the speed it takes in milliseconds to animate between slides.

Click cards to navigate

When a slide is clicked the slider will navigate to the next slide. This option should be disabled if a slide has content that requires interaction (IE a link or button).

Show arrow navigation

This will display two arrows below the slider that can be clicked to move to the next or previous slide. Four color settings are provided for customizing the color of the arrows.

Show bullet navigation

When enabled, a bullet for every slide will appear below the slider. If any of the bullets are clicked the slider will automatically advance to the corresponding slide. Tow color settings are provided for customizing the color of the bullets.

Auto navigation

This option will automatically transition through all of the slides in an infinite loop. A navigation interval setting is provided to define how long the slider waits in-between transitions. Auto navigation will pause if it detects a mouse cursor over the slider.

Index Card Styles

Match card heights

Enabled by default, this setting makes sure that each slide/card will be the same size. If you would rather your slides have varying heights you can disable this setting.

Card Width

This value controls the width of all of the slides. This effects the width of the entire slider and if the “Direction” setting is set to either left or right, the card overlap will take up a percentage of this defined size.

Padding

These values adjust the default padding on the inside of the slides. These values can be overwritten by individual slide/card stack padding settings.

Border
These values adjust the default border width and radius of the slides. These values can be overwritten by individual slide/card stack border settings.

Shadow spread

Use this slider to adjust the size of the shadow that appears around the edges of the slides. Moving the slider to the left most position will disable the shadow.

Colors

Bg: Defines the default background color for the slides. The background color can be overwritten by individual slide/card stack background color settings.

Border: Defines the default border color for the slides. The border color can be overwritten by individual slide/card stack border color settings.

Shadow: Defines the color of the shadow that appears around the edge of each of the slides.

Creating Transparent/Translucent Backgrounds

The background of each of the slides/cards can be made transparent or translucent. All you will need to do is adjust the opacity slider while selecting a color in the Index Card Styles > Color > Bg setting.

If a slide/card has a color with a reduced opacity a “frosted glass” or blur effect will be applied that allows the content behind the slide to be visible without effecting readability. This effect is supported in all major browser except Firefox. Firefox has partial support in that it can only blur the contents of the slides and not anything behind the slides (like a background image for example).

Creating Custom Navigation Buttons

There are two predefined class names that can be applied to any stack to allow it to function as a next or previous slide navigation button.

index-cards-next
index-cards-back

These class names can be added to the the stacks HTML > CSS classes field of any stack. The stack must be placed inside of slide/card stack to function.

If you are using a prior version of the Stacks plugin that does not include the CSS classes field you can contact 1LD support to receive a free wrapper stack that will allow you to add classes.


	                    	                

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Vivid Titles

Create stunning, uniquely-shaped content effortlessly with Vivid Tiles. Tailor your website’s appearance with customizable top and bottom edges, and arrange these elements seamlessly in rows.

Vivid Titles RapidWeaver Stack

Robust Customization

  • Create rows of uniquely-shaped content elements.
  • Customize each one independently.
  • Add almost any type of content.

Diverse Edge Options

  • Edges support 9 shape options with 4 layouts.
  • Mix and match edge shapes and layouts on top and bottom.
  • Incorporate images, icons, or text inside edge design.

Effortless Setup

  • Minimal setup required for immediate results.
  • Customizable style options to fit any website design.
  • Control element size and colors with ease.

Simply Responsive

  • Tiles automatically adapt to browser and device width.
  • Full control over tile horizontal and vertical alignment.
  • Automatically make all tiles in a single row the same height.

Eye-Catching Styles

  • Each edge shape has two unique background layers.
  • Adjust edge layer visibility, placement, and offset.
  • Apply subtle, attention-grabbing in-view animations.

CHECK IT OUT!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software