Wrap an element in a Box or link block with keyboard shortcuts or the on-canvas menu.
As you design your sites in Webflow, you may want to wrap elements in a parent element, like a Box or link block, to style them together. Keyboard shortcuts and the on-canvas menu let you wrap an element in a couple of clicks.
Note
You can wrap any element using these methods, including elements that are bound to the CMS. You can also wrap individual component instances and elements inside components, but you can't wrap main components.
Wrap an element in a Box
A Box groups elements so you can style and position them together. When you wrap an element in a Box, the Box uses the Div tag. You can change the tag in the Settings panel.
To wrap an element in a Box:
- Select the element you want to wrap on the Designer canvas
- Press Command + Option + G (on Mac) or Control + Alt + G (on Windows)
You can also wrap an element in a Box using the on-canvas menu:
- Right-click the element you want to wrap on the Designer canvas
- Hover over Wrap in
- Click Box
Once you've wrapped the element, the new Box is selected and expanded in the Navigator panel. Press Command + Enter (on Mac) or Control + Enter (on Windows) to add a class to it.
Wrap an element in a link block
Link blocks are similar to Boxes in that they're commonly used for structure and layout, but the area inside the link block becomes a link.
To wrap an element in a link block:
- Select the element you want to wrap on the Designer canvas
- Press Command + Option + A (on Mac) or Control + Alt + A (on Windows)
To wrap an element in a link block using the on-canvas menu:
- Right-click the element you want to wrap on the Designer canvas
- Hover over Wrap in
- Click Link block
Once you've wrapped the element, the new link block is selected and expanded in the Navigator panel. Press Command + Enter (on Mac) or Control + Enter (on Windows) to add a class to it.
Unwrap an element
You can also unwrap an element from a wrapping parent element (e.g., a Box or link block). Unwrapping keeps child elements in their current locations.
To unwrap an element from its wrapping parent element:
- Select the wrapping parent element you want to delete
- Press Command + Shift + G (on Mac) or Control + Shift + G (on Windows)
Note
If a child element can't be on the canvas without a parent element (e.g., a form input field or a list item), you can't unwrap it.