Div block

They sound like a techy developer term, but that’s all charades. Div blocks (div like division) are sections, containers, buttons—but without the styling.

A div block is a simple element that has no default styling. Therefore, you can turn it into whatever you need it to be (magic, yes). You can even put another div block inside a div. Most commonly, they’re used to hold elements together.

Tip: Sometimes empty div blocks are used as dividers to create space between elements. Though this works, we recommend using padding and margin rather than adding div blocks. You’ll achieve the same results and your Layer sidebar (and code) will be much neater.

Adding a div block

To add a div block, navigate to the top panel. Look for the Square icon, unfold and click Div block. From there onwards, you can add any other elements.

Styling

Let’s say you insert a heading and text within the div block. By putting them inside the div, you can edit and manage them as one single element.

If you want to change the font color to green, just select the div block title in the Layer sidebar and change the font color in the Design tab on the right. See how all the text is changed at once?

You can style div blocks in the same way as other elements. Click on the div block and navigate to the sidebar on the right. Under the Design tab, you can now change sizing, spacing, typography, borders and more.

Duplicating and deleting

To duplicate a div block, right-click in the Layer sidebar on the div you want to copy and click Copy. Then click on the main grid layer (titled “Grid”) and paste the item.

Keyboard shortcuts: On a Mac, use ⌘ + C to copy and ⌘ + V to paste. For Windows, press Control + C and Control + V.

If you want to delete a div block, right-click in the Layer sidebar on the div you want to erase and click Delete. You can also use the Backspace key ⌫ on your keyboard.

You can use these same actions when clicking directly on the div block in your canvas.