Link Drawer Tutorial

General

Start Collapsed (checkbox)

This check box will determine whether or not the drawer is collapsed or open when the page loads

Position (Dropdown)

Options:

Fixed
Inline

Fixed

Fixed means that the drawer will stick to the top/bottom of the page, and follow the user as they scroll. Once this option is selected, you will see a new dropdown appear for select the orientation (top/bottom) of the drawer.

When this option is selected you will also see some display options such as:

Always
On Scroll (Appears on the page when scrolled to)
On Scroll Past (Appears on the page when scrolled to and hides again when scrolled above)

Inline

Inline means that the drawer will sit with the content wherever you place it on the stacks page, it will not follow the user as they scroll.

Z-index

The index determines the 3D position of the drawer. If you find that the drawer is being hidden behind other stacks, increase this value.

NOTE: You do not have to worry about setting individual z-indexs for multiple Link Drawers, this is already handled automagically ^_^

Max-width

This determines the maximum width for the drawer

Breakpoints

Here you can set the Tablet, and Mobile Breakpoints for the stack. The number of columns and other responsive options, will change at these specific points. All default values apply to desktop sizes.

Columns

Here you can set the number of columns for the item grid. A separate number of columns can be set for Desktop, Tablet, and Mobile.

Drawer

Font Family (Dropdown)

This dropdown allows you to choose the font for Link Drawer

Outer Margin

This is used to set spacing around the outside of the Link Drawer, It comes in handy when the browser shrinks, but you don’t want the sides of the drawer to touch the edge of the page.

Corner Radius

Determines the roundness of the corners of the drawer and the toggle button.

Border Weight & Color

You can add a border to the drawer by setting a weight, and adjusting the color. For no border, simply set the weight to 0.

Shadow (ON or OFF)

You will see the option to toggle the shadow on or off. Once turned on you will find inputs for adjusting the shadow of the stack.

Background (Off, Color, Gradient, Image)

You can choose between 4 options for the Drawer background:

Off (No background)
Color (One single Color)
Gradient (Two colors, and options for gradient direction)
Image (A custom background image of your choice)

Items

Icon Size (Desktop, Tablet, Mobile)

Here you can set the size for icons of the Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile

Text Size (Desktop, Tablet, Mobile)

Here you can set the size for the text of Link Items in the Drawer, You will see 3 inputs, one for Desktop, Tablet, and Mobile

Icon Color (Initial & Hover)

Here you can set the color of the Icons, for both the initial state and hover state

Text Color (Initial & Hover)

Here you can set the color of the Text, for both the initial state and hover state

Backgorund Color (Initial & Hover)

Here you can set the background color for the Link Items. You will see options for the initial background and the hover background

Border Color (Initial & Hover)

Each item has a 1px solid border around it, which is set to opacity 0 by default. If you want to apply a border to the initial or hover state, change these colors and increase the opacity to what you desire.

Gutters

This determines the amount of space inbetween all of the link items

Content Spacing

The determines the amount of spacing between the icons and the text in the link items.

Padding

Here you can set the vertical and horizontal padding for each item.

Radius

Determines the corner roundness for the Link Items.

Toggle

Hide Icon (checkbox)

If this option is checked, then the icon for the toggle will be hidden and only text will appear. Useful for button like toggles.

Fill Mode (Full or Pixel)

Full (The toggle extends the full width of the stacks max-width)
Pixel (Allows you to set a custom pixel width for the toggle)

Alignment

If the toggle is set to a Pixel width, then a dropdown menu will appear to set the horizontal alignment of the toggle. You can set it to:

left
center
right

Height

This input determines the height (size) of the menu toggle

Text (Open and Close text)

Here you can set the actual text content for the toggle in it’s open and closed states

Icon Size (Open & Close icons)

This allows you to set the size for the open and close icons

Background (Initial & Hover)

Here you can set the initial background color and the hover background color for the toggle

Icon / Text

Here you can set the color of the icon and text of the toggle button, for both the Initial and Hover states.

Move beyond the confines of static content layouts! Movable Windows allows your page visitors to effortlessly drag and reposition custom content windows anywhere in the browser viewport. Windows can be minimized to free up space and stay fixed to the browser viewport so they are always accessible.

Resize & Minimize

Windows can be resized to take up more or less space, or maximized to fill the entire screen. But that’s not all – these windows are like handy sidekicks, always ready to assist. Need quick reference? No problem! Windows can be minimized when not in use, saving precious screen space for what really matters – your page content.

Inline

Open windows stay fixed on screen so they are always accessible. Minimized windows have three modes to choose from. “Inline” keeps it in line with other content, “Fixed” is always on screen, and “Draggable” lets you move it around while minimized.

Customizable

It’s not just about functionality; it’s about style too. Customize your windows by size, position, and color. Add in text, images, forms, links – you name it! Want a little more flair? Allow window resizing, choose whether they start minimized or open, change the toggle icon, or hide the window title when minimized.

Check it out!

Tutorials

Link Drawer