Divider Block

The flexible divider block. Different styles, weights and heights.

Settings

This section is used to control the look of the divider. Let’s take a look at the available options.

  1. Style: There are four available styles to choose from, solid, dotted, dashed and double.
  2. Weight: Controls the thickness of the divider.
  3. Width: Controls whether the divider will span the entire width of its container or be narrower.
  4. Height: Sets the height of the divider’s container.
  5. Alignment: Changes the alignment of the divider, useful when the width is less than 100%. Available options are left, center and right.

Block Appearance

Under the block appearance tab you can control how the block looks. Let’s take a look a the options.

  1. Color: This option allows you to set the color of the divider.
  2. Background Color: Controls the color of the divider container’s background.
  3. Background Image: Applies a background image to the divider’s container and allows you to configure its appearance.
  4. Border: This option allows you to select the border style via the drop down and then select the border color and width.
  5. Border Radius: This option allows you to round the divider container’s corners.
  6. Box Shadow: This option allows you to apply an inset/outset box shadow, its color, spread, blur radius and offset.
  7. Padding: With this option you can control the padding on each side of the block individually or all at once.
  8. Margin: With this option you can individually control the margin on each side of the block individually or all at once.

Notice that the Background Image, Padding and Margin options have three icons next to their label. These are the Desktop, Tablet and Mobile icons. By clicking each icon you can separately modify the control’s values for each device.

Visibility Settings

Via the Visibility Settings you can hide the block for certain type of device or user.

The Viewport visibility toggles allow you to hide the block on desktops, tablets and mobiles. You can choose to hide it on more than one device type.

The Authentication visibility toggles allow you to display the block only to logged in or logged out users.