03012 – How to setup a Spacer Block

The Spacer Block allows you to add extra “white” space above or below your Block elements. Below is an overview of the various Spacer Block settings.

Height

This feature allows you choose how much “white” space you would like to add between elements. Simply add the numeric (pixel) value to the field provided.

Spacing

This feature allows you to add more space around your Spacer Block.

  • Margin Bottom
    This feature allows you to add more space below the Spacer block.

    Simply add the numeric (pixel) value to the field provided.

 

Animation

This tool allows you to add animation effects to your Spacer 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 Spacer Block. Simply choose the preferred option from the drop-down menu.
    + Fade In = the Spacer block will fade in from the background
    + Scale In = the Spacer block scales in from the background
    + Top = the Spacer block will slide in from the top
    + Right = the Spacer block will slide in from the right
    + Bottom = the Spacer block will slide in from the bottom
    + Left = the Spacer block will slide in from the left
  • Delay (ms)
    If you want to add a time delay for when the spacer appears, simply add the delay in milliseconds e.g. 3000ms will be 3 second delay.

 

Display

This feature allows you to choose the type of device you want the Spacer block to take effect.

  • Display
    From this drop-down, you can choose which device you want to use the Spacer block
    + All Devices = the Spacer block will take effect in both desktop and mobile devices
    + Desktop Only = the Spacer block will take effect in desktop devices only
    + Mobile Only= the Spacer block will take effect in mobile devices only

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