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:

Details

  • 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.

  • Horizontal Align
    You can choose either Left, Center or Right alignment from the drop-down

 

Spacing

This feature allows you to add additional spaces around the divider block.

  • Padding
    Add additional spaces inside the Divider block. Simply add the numeric (pixel) value to the Top, Bottom, Right or left padding field provided.
  • Margin
    Add additional spaces outside the Divider block. Simply add the numeric (pixel) value to the Top, Bottom, Right or left margin 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 Divider 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.

 

 

Display

This feature allows you to choose the type of device you want the Divider block to display.

  • Display
    From this drop-down, you can choose which device you want to display the Divider block
    + All Devices – the Divider block will be displayed on both desktop and mobile devices
    + Desktop Only – the Divider block will be displayed on desktop devices only
    + Mobile Only – the Divider block will be displayed on mobile devices only
    + None – the Divider block will not be displayed on both desktop and mobile device

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