Enclose element in container or anchor block

While crafting your websites in Webflow, you might consider enclosing elements within a containing element like a container or anchor block to customize their appearance more conveniently. Now, you have the option to enclose an element in a container or anchor block swiftly, reducing the number of clicks and enhancing efficiency in your design process. 

During this tutorial, you’ll understand: 

1. The process of enclosing an element in a container block
2. The process of enclosing an element in an anchor block
3. The process of enclosing an element in an H Flex or V Flex component
4. How to unenclose an element

Please Note: You can enclose any element using these techniques, even elements linked to the CMS. Remember that you can also enclose individual component instances and elements within components, excluding the main components.

How to enclose an element in a container block

Container blocks are fundamental and versatile elements in web design. They serve multiple purposes like creating space or acting as dividers, but mainly they are used for grouping elements. 

To enclose an element in a container: 

1. Choose the element you wish to enclose on the Designer canvas
2. Press Command + Option + G (on Mac) or Control + Alt + G (on Windows)

Another way to enclose an element in a container is through the on-canvas menu: 

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

Once the element is enclosed, the new container (i.e., the container block) will be automatically selected and expanded in the Navigator panel.

‍Top tip: After enclosing your element in a container block, you can press Command + Enter (on Mac) or Control + Enter (on Windows) to add a class.

How to enclose an element in an anchor block

Anchor blocks function similarly to container blocks in terms of structure and layout, but the interior of an anchor block converts into a hyperlink. 

To enclose an element in an anchor block: 

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

To enclose an element in an anchor block via the on-canvas menu: 

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

Once enclosed, the new container (i.e., the anchor 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 apply a class after enclosing the element in an anchor block.

How to enclose an element in an H Flex or V Flex component

To wrap an element in an H Flex component: 

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

To wrap an element in a V Flex component: 

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

To enclose an element in an H Flex or V Flex component through the on-canvas menu: 

1. Right-click the element you wish to enclose on the Designer canvas 
2. Hover over Wrap in
3. Choose H Flex or V Flex

How to unenclose an element

You also have the option to unenclose an element from a parent containing element (e.g., a container, section, anchor block, etc.). When unenclosing, the child elements retain their current positions.

To unenclose an element from its parent container:

1. Select the parent container you wish to remove
2. Press Command + Shift + G (on Mac) or Control + Shift + G (on Windows)

Note: If a child element requires a parent container to be present on the canvas (e.g., a form input field, a list item, etc.), you won’t be able to unenclose the child element.