An overview of the div block — the most basic and versatile element in site building.
A div block is the most basic and versatile element used when building a website. Buttons, containers, and sections are all div blocks with certain extra properties. To a certain extent, a div block can be whatever you want it to be. For example, div blocks can be used to create space or as dividers, but the most common use for a div block is to group other elements together. It defines a division in the HTML document.
Add a div block
You can add a div block to your Webflow site from the Add panel. You can then group other elements inside a div block—for instance, a heading, paragraph, and button. By adding a div block and dragging these three elements inside, they can be edited and controlled as one. Setting the width of the div block to 50% will also set the content inside to 50%.
When you place elements inside of a div block, it will automatically be sized according to the content within. Centering the div block will also center its content.
Convert div blocks to link blocks
You can convert a div block to a link block to link it (and the content inside it) to other resources. This is helpful if you’ve accidentally used a div block instead of a link block when grouping content.
To convert a div block to a link block, make sure the div block doesn't contain any link elements, then right-click the div block and choose Convert to link block.
Create space between elements with div blocks
You can use div blocks to create a blank space between other elements (and give it a set height or width to push other content around). However, this method is not ideal to create space and can be difficult to track over time. As a general rule, it's better to use margin or padding to create space between elements, and only use a div block if absolutely necessary.