Div Block Element

An overview of the Div Block element

The Div Block is the most commonly used component on the web. At their route levels, many element are Div Blocks with certain extra properties. For example, a container is a Div Block that comes with default margins.

Div Blocks have many different use cases. They can be used to add spacing between components, create custom components, give blocks of color to your app & so on. The most common use case for a Div Block however is to group different components together.

In this lesson you'll learn to:

• Add a Div Block

• Group components inside a Div Block

• Style a Div Block

• Nest Div Blocks

Add a Div Block

To add a Div Block, head on over to the components panel & find the Div Block element.

As with all other components, the Div Block can be added to the page one of two ways.

1. By selecting the Div Block & dragging it directly onto the canvas.

2. By using the arrows to add the Div Block to a selected component.

Notice that the empty Div Block has a fixed size added to it by the Dittofi Design Studio. The reason for this is that the Div Block by itself will not have any size. In order for a Div Block to have a size, it must have components added to it, as we are about to see.

Group components inside a Div Block

You are able to nest components inside a Div Block. For example, adding an image, a heading & a paragraph to a Div Block.

Notice that when you place components inside a DivBlock, the DivBlock will expand & contract according to the sizes of the components that are added to it.

Once you've added components to a DivBlock, you can style the components inside the DivBlock simply by styling the DivBlock itself. For example, if we select the DivBlock & set the typography color to a bright red, you'll notice that this effects all of the typography components inside the DivBlock.

The components also move around the page with their DivBlock. Consider the following DivBlock with a background image & heading component. Notice that as we add margin to the DivBlock, the background image & heading component also move with the DivBlock.

Styling a DivBlock

You can style the DivBlock using the styles panel on the right hand side of the page. For example, you can add a background color to your DivBlock with the background color settings.

You're also able to set a fixed height & width for your DivBlock.

When your DivBlock has a fixed width & height, adding components to the DivBlock will mean that the DivBlock no longer expands or contracts to the size of the component that is nested inside it.

In the case where you don't want a component to spill out, for example with a typography component, you can use the "overflow" setting in the styles panel to keep the DivBlock fixed in size, but the text contained within.

Nesting DivBlocks

It is possible to nest DivBlocks inside other DivBlocks. For example, we can:

1. Add a DivBlock & give it a minimum width & height.

2. Add two DivBlocks inside the original DivBlock

3. Select the first DivBlock, using the breadcrumb trail & add padding to that DivBlock.

4. Add different background colors to each DivBlock to highlight which Div is which.