03025 – How to setup a Divider Block

The Divider Block allows you to add a divider line anywhere in your Campaign or Course page. Below is an overview of the various Divider Block settings.

Color

This feature allows you to change the color of the divider.

  • To change the color, you can either add a Hex code in the field provided or choose a color from the Color Wheel.
  • If the Color Wheel is closed, simply click on the Color Picker button to the right of the color field.
Width

This feature allows you to change the width of the divider
Simply drag the slider left or right to decrease or increase the width.

Height

This feature allows you to change the height of the divider
From the drop-down, select the pixel height you prefer.

Style

This feature allows you to change the appearance of the divider.
From the drop-down you can select either Solid, Dashed or Dotted.

Alignment

The feature allows you to reposition the divider on the page.

  • Align
    You can choose either Left, Center or Right alignment from the drop-down
Spacing
  • Margin Bottom
    This feature allows you to add more space below the Button block
    Simply add the numeric (pixel) value to the field provided.
Options

This feature allows you to use the available options for extra coding (HTML/CSS/JavaScript)

  • Element Id:
    This shows the element id of a specific block, which can then be used by CSS and JavaScript to perform certain tasks for the element with the specific id value. To learn more, please checkĀ here
  • Classes:
    This feature allows is used to define equal styles for elements with the same class name. To learn more, please checkĀ here.
Animation

This tool allows you to add animation effects to your Divider Block.

  • Type
    From this drop-down you can choose a trigger to activate the animation i.e.
    + None = no animation will be applied
    + On Page Load = the animation is triggered as the page loads
    + On Page Scroll = the animation is triggered only when the user scrolls to that section.
  • Style
    This feature adds an animation style to your Divider Block. Simply choose the preferred option from the drop-down menu.
    + Fade In = the Divider block will fade in from the background
    + Scale In = the Divider block scales in from the background
    + Top = the Divider block will slide in from the top
    + Right = the Divider block will slide in from the right
    + Bottom = the Divider block will slide in from the bottom
    + Left = the Divider block will slide in from the left
  • Delay (ms)
    If you want to add a time delay for when the Divider appears, simply add the delay in milliseconds e.g. 3000ms will be 3 second delay.
Mobile

This feature allows you to adjust the divider’s Padding and Margin when in mobile view.

  • Padding
    You can add padding around your divider, so that there is additional space. Simply add the numeric (pixel) value to the Top, Bottom, Right or Left Padding field provided.
    This is particularly helpful if you want to add spaces inside your Text block border.
  • Margin
    This feature allows you to add more spaces outside the block when site is viewed in mobile.
    Simply add the numeric (pixel) value to the Top, Right, Bottom or Left Margin field provided.

That’s it, click on SAVE CHANGES and you are done!