Div | SP Page Builder (Pro) 4.x - Documentation | JoomShaper

SP Page Builder (Pro) 4.x

Updated Last: 03 August 2022

Div

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. 

SP Page Builder 4.0

Display

SP Page Builder 4.0

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.
SP Page Builder 4.0

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.

SP Page Builder 4.0

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.