Wrap element in div or link block

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

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

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. 

In this lesson, you’ll learn: 

  1. How to wrap an element in a div block
  2. How to wrap an element in a link block
  3. How to wrap an element in an H Flex or V Flex element
  4. How to unwrap an element
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.

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.

How to wrap an element in a link 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.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top