Div block

The DivBlock is the most commonly used component on the web. At their route levels, many componants are DivBlocks with certain extra properties. For example, a container is a DivBlock that comes with default margins.
DivBlocks 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 DivBlock however is to group different components together.
In this lesson you'll learn to:
Add a DivBlock
Group components inside a DivBlock
Style a DivBlock
Nest DivBlocks
Add a DivBlock
To add a DivBlock, head on over to the component panel & find the DivBlock component.
As with all other components, the DivBlock can be added to the page one of two ways.
1.By selecting the DivBlock & dragging it directly onto the canvas.
2.By using the arrows to add the DivBlock to a selected component.
Notice that the empty DivBlock has a fixed size added to it by the Dittofi Design Studio. The reason for this is that the DivBlock by itself will not have any size. In order for a DivBlock to have a size, it must have components added to it, as we are about to see. 
Group components inside a DivBlock
You are able to nest components inside a DivBlock. For example, adding an image, a heading & a paragraph to a DivBlock.
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.
​
​

Button

Link block

Last modified 6mo ago

Copy link

Contents

Add a DivBlock

Group components inside a DivBlock

Styling a DivBlock

Nesting DivBlocks