What is a Div Block? 

A Div block can be whatever you want it to be. Div blocks are really versatile and are used to group elements and serve different purposes. 

The Most Common Uses of Div Block Are:

• Group elements together
• Create divider
• Create space (Margin is recommended though, but if you can’t do it with Margin do it with the Div block

How to Add a Div Block?

You can add a Div addon to your page from the SP Page Builder sidebar. Simply drag the Div addon from the Addons panel and drop it on the section of the page where you want to add a div block.

Div Settings

When you click on the Div addon, the addon inline editor will open up. You can access the Div settings and customize the Div addon to fit your needs. 

Display

From the Display drop-down, you can select how your Div block will display. The display property specifies how an element is displayed. It has the following options:

• Block:  A block always starts on a new line and takes up the full width available.
• Inline Block: An inline element does not start on a new line and only takes up as much width as necessary.
• Flex: Flex and inline-flex both apply flex layout to children of the Div block. Div with Display set to Flex behaves like a block-level element itself.
• Inline Flex: Inline Flex makes the Div behave like an inline element.

Div Settings for Flex

• Horizontal: A layout that arranges items from left to right on the horizontal axis.
• Vertical: A layout that arranges items from top to bottom on the vertical axis.

Reversed Direction: If the flex-direction property is set to reverse, 

• For Horizontal direction: The main axis direction will be from right to left, reversing the horizontal order of items in the flex container. 
• For Vertical Direction: The main axis direction will be from bottom to top, reversing the vertical order of items in the flex container.

Then you can set Justify, Align, Wrap, and Flex Gap. 

• Justify: Determines how flex items are aligned along the main axis of the flex container. Can be set to flex-start, flex-end, center, space-between, space-around, or space-evenly.
• Align: Determines how flex items are aligned along the cross-axis of the flex container. Can be set to Align-start, Align-center, Align-end, or Stretch.
• Wrap: Determines whether flex items should wrap onto multiple lines if they exceed the width of the flex container. Can be set to No Wrap (default), wrap, or wrap-reverse.
• Flex Gap: Defines the space between flex items in a flex container. Define the gap for Horizontal and Vertical direction separately. 

Width & Height

The height and width properties are used to set the height and width of a Div block. You can use the default values or simply drag the bar to set your custom height and width. 

By default, the height and width are specified in px values. 

Overflow

The overflow property specifies what should happen if content overflows the Div block.

You get the following options to set the Overflow: 

• Visible: The overflow is not clipped. It renders outside the Div block. This is set as default. 
• Hidden: The overflow is clipped, and the rest of the content will be invisible.
• Scroll: The overflow is clipped, but a scroll bar is added to see the rest of the content.
• Auto: If overflow is clipped, a scroll bar should be added to see the rest of the content.

Add Elements Inside the Div Block

Once you’ve set the Display, Height, Width, and Overflow of the Div addon, you can start to add elements inside the Div block.

To add an element inside the Div block, simply drag & drop the addon you wish to add from the Addons panel of the Sidebar inside the Div addon.