collection.createVariableMode(name, breakpointId)

Create a variable mode in a collection.

Variable modes can be created as one of two types:

• Manual modes are applied manually to elements or pages. Omit the breakpointId parameter, or pass null, to create a manual mode.
• Automatic modes are driven by a breakpoint and apply automatically at the matching screen size. Pass a BreakpointId to create an automatic mode.

Syntax

1
collection.createVariableMode(name: string, breakpointId?: BreakpointId | null): Promise<VariableMode>

Parameters

• name: string - The name of the variable mode to create.
• breakpointId: BreakpointId | null (optional) - The breakpoint that drives the mode automatically: "xxl" | "xl" | "large" | "main" | "medium" | "small" | "tiny". Omit or pass null to create a manual mode.

Returns

Promise<VariableMode>

A Promise that resolves to a VariableMode object.

Example

1
// Get Collection
2
const collection = await webflow.getDefaultVariableCollection()
3
4
// Create a manual variable mode
5
const darkMode = await collection?.createVariableMode("Dark Mode")
6
console.log(darkMode)
7
8
// Create an automatic variable mode driven by the tablet breakpoint
9
const tabletMode = await collection?.createVariableMode("Tablet", "medium")
10
console.log(tabletMode)

Designer Ability