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.

Scroll Shift is the ultimate tool for adding seamless scroll-based animations to your web design projects. Create captivating and engaging websites by effortlessly animating elements as the user scrolls through the page. This tool can bring your designs to life with smooth transitions, eye-catching movements, and precise timing.

Create captivating visuals by linking multiple elements together to form a stacked layer effect. These elements can separate and come together to form a unified element, adding depth and dimension to your designs. The possibilities are endless as you craft intricate animations that leave a lasting impression.

Drive attention to essential content by implementing animations that trigger only when the user scrolls past a specific section. By strategically timing the animations, you can ensure that users take notice of crucial information and engage with your content effectively.

Check it out!

Tutorials

Link Drawer