Using the Design Library

Click on the Design Library button at the top of the Block Editor. This will open the Stackable Design Library which contains hundreds of pre-made designs that you can easily use in your pages.

In the Design Library, you can select from Block Designs, UI Kits and Wireframes. On the left pane, you can filter your search based on the block section you want to create if you select Block Designs and Wireframes, or based on the design for UI Kits.

You can also switch between large, medium or small previews when viewing designs by selecting the icon buttons on the upper right.

The Design Library refreshes the library once a day. When we release new designs, you can get these right away by clicking on the refresh button.

Design Library Style Options

Each design library pattern is set of Stackable blocks, wrapped inside a full width Columns block, and is meant to be used as complete sections in a page.

Our Design Library leverages the different global settings available in Stackable - such as the Global Design System. With that, each design library pattern follows your global design system, color schemes, spacing, etc. This allows you to have the flexibility to insert patterns in your pages, and still have the ability to adjust your global design system subsequently.

The Design Library allows you to change some Styling Options across all the available patterns. Here are the options you can change.

Section Background

You can toggle the background for each pattern on/off. This is identical to enabling the Block Background toggle in the style tab of the main block of the design.

Background Scheme

This is the background color scheme used by the patterns in the library - this is used only when the Section Background above is enabled or the Block Background is enabled for inside the pattern. The default value is selected here, which corresponds to the default Background Color Scheme selected in your Global Color Schemes.

Container Scheme

Certain patterns have containers enabled in them, and these use the container color scheme defined here. The default value is selected here, which corresponds to the default Container Color Scheme selected in your Global Color Schemes.