Div block

An overview of the Div block — the most basic and versatile element in site building.

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

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.

In this lesson:

  1. Add a Div block
  2. Style a Div block
  3. Nest a Div block
  4. Duplicate a Div block
  5. Convert Div blocks to link blocks
  6. Create space between elements with Div blocks

Add a Div block

Div block icon thumbnail

You can add a Div block to your Webflow project from the Elements panel. In the example below, a heading, paragraph, and button are within a section, but the text is not legible. By adding a Div block and dragging these 3 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%, and make the text more legible.

The five elements that are included in the basic section are Div block (highlighted), list, list item, link block and button.
Select the Div Block element
On the left, the navigator displays a div block containing a H1 Heading, Paragraph and button elements. On the right, the width of 50% is highlighted on the size section in the style panel.
Setting the width to 50%

When you place elements inside of a Div block, it will automatically be sized according to the content within.

In the example below, the Div block now contains the elements inside. Centering the Div block will also center its content. 

The spacing section of the styling panel is displaying the Center element horizontally button highlighted.

Style a Div block

You can style the Div block using the Style panel on the right. For example, a Div block can have a background color or drop shadows. You can also give the Div block Padding to add space between the edge of the Div block and the content within. You can click and drag to adjust the padding (as seen in the example below) by holding Shift while dragging to adjust all four sides at once.

Step one on the left, click on the color button in the backgrounds section of the styling panel. Step two on the right, select the color you want to set as the background.
Adding a background
Step one on the left, select the Box shadows effect under the effects section in the styling panel. Step two on the right, the box shadow settings panel displays type, angle, distance, blur, size and color settings.
Adding a drop shadow
The Spacing section displays margin and padding settings, also a center element horizontally button.
Adding padding

Nest Div blocks

You can also place Div blocks inside other Div blocks. Here’s an example where a Div block is dropped inside another and styled to look like a horizontal divider.

  1. Drop new Div block into an existing one
  2. Set width to 100px and height to 2px
  3. Adjust the margin to create space
  4. Add a background color
Step one on the left, set the width and height. Step two on the right, add margin to the div block.
Set width and height, then add margin.
The backgrounds section of the styling panel displays a plus sign for Image & gradient, a color picker and a drop down menu for clipping.
Add background.

Duplicate a Div block

You can duplicate a Div block and its content. There are two ways to do this:

Duplicate with right-click

  1. Right-click the Div block (right-click on the element label if it’s hard to find empty space to click inside the Div block)
  2. Select Duplicate

Duplicate with shortcuts

  1. Select the Div block
  2. Press Command + C (on Mac) or Control + C (on Windows) to copy
  3. Press Command + V (on Mac) or Control + V (on Windows) to paste

When you duplicate a Div block, as with any element, you also duplicate the class and styles attached to it. Any style changes you make to one Div block will affect all other Div blocks with the same class name — whether they're on the same page or another page.

Two div blocks in separate sections are highlighted on the navigator panel. Each Div Block contains an H1, paragraph and button element.

After duplicating a Div block, you can drag it to another location on the page — like a section, container, or another Div block. You can also press Command + X (on Mac) or Control + X (on Windows) to cut, select the element you want the Div block to be in, and then press Command + V (on Mac) or Control + V (on Windows) to paste at the bottom of the selected element.

Convert Div blocks to Link blocks

You can convert a Div block to a link block to link it, and it's content, to other resources. This is helpful when you realize that you've used a Div block instead of a Link block when grouping content in a layout.

To change 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 convert it to a Link block.

Create space between elements with Div blocks

You can use Div blocks to create a blank space between other elements (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.

Table of contents

Continue learning

Oops! Something went wrong while submitting the form.

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


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