Wrap element in div or link block

Updated

Use keyboard or canvas shortcuts to wrap your element in a div or link block.

As you design your sites in Webflow, you may want to wrap elements within a parent element like a div or link block to style them more easily. Now, you can wrap an element in a div or link block in seconds, saving you clicks and maximizing efficiency in your design workflow. 

Note

You can wrap any element using these methods, including elements that are bound to the CMS. Note that you can also wrap individual component instances as well as elements inside components, but you cannot wrap main components.

How to wrap an element in a div block

Div blocks are basic, versatile elements in web design. They can be used to create space or as dividers, but are commonly used to group elements together.

To wrap an element in a div: 

  1. Select the element you want to wrap on the Designer canvas
  2. Press Command + Option + G (on Mac) or Control + Alt + G (on Windows)

You can also wrap an element in a div using the on-canvas menu: 

  1. Right-click the element you want to wrap on the Designer canvas
  2. Hover over Wrap in
  3. Click Div block

Once you’ve wrapped the element, the new wrapping element (i.e., the div block) will be automatically selected and expanded in the Navigator panel.

Note

Pro tip: You can press Command + Enter (on Mac) or Control + Enter (on Windows) to add a class after wrapping your element in a div block.

Link blocks are similar to div blocks in that they’re commonly used for structure and layout, but the area inside of the link block becomes a link. 

To wrap an element in a link block: 

  1. Select the element you want to wrap on the Designer canvas
  2. 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: 

  1. Right-click the element you want to wrap on the Designer canvas 
  2. Hover over Wrap in
  3. Click Link block 

Once you’ve wrapped the element, the new wrapping element (i.e., the link block) will be automatically selected and expanded in the Navigator panel.

Pro tip

You can press Command + Enter (on Mac) or Control + Enter (on Windows) to add a class after wrapping your element in a link block.

How to wrap an element in an H Flex or V Flex element

To wrap an element in an H Flex element: 

  1. Select the element you want to wrap on the Designer canvas
  2. Press Command + H (on Mac) or Control + H (on Windows) 

To wrap an element in a V Flex element: 

  1. Select the element you want to wrap on the Designer canvas
  2. Press Command + G (on Mac) or Control + G (on Windows) 

To wrap an element in an H Flex or V Flex element using the on-canvas menu: 

  1. Right-click the element you want to wrap on the Designer canvas 
  2. Hover over Wrap in
  3. Click H Flex or V Flex

How to unwrap an element

You can also unwrap an element from a wrapping parent element (e.g., a div, section, link block, etc.). Unwrapping will keep child elements in their current locations.

To unwrap an element from its wrapping parent element:

  1. Select the wrapping parent element you want to be deleted
  2. Press Command + Shift + G (on Mac) or Control + Shift + G (on Windows)
Note

If a child element cannot be present on the canvas without the presence of a parent element (e.g., a form input field, a list item, etc.) you won’t be able to unwrap the child element.