Boxes

The box shortcode allows you to display a message box or other boxed content. The content of your box should be between the opening and closing shortcodes. The options for this shortcode are shown below. See examples here.

OptionDefaultExampleDescription
typebasictype="success"The type of box will determine how it looks:

  • blank – Blank
  • custom-boxed-item – Background blend
  • basic – Designed box using theme Primary color
  • basic-light – Designed box using theme Light color
  • basic-dark – Designed box using theme Dark color
  • info – Information
  • warning – Warning
  • error – Error
  • success – Success
animation(empty)animation="fadeIn"Adds a CSS animation to boxes. For animation options and examples see here.
animation_delay(empty)animation_delay="300"Gives the animation a delay in milliseconds.
animation_offset(empty)animation_offset="50"Will offset the point in which the animation is triggered on the screen. Value in pixels and can be positive or negative.
align(empty)align="left"The box alignment within your page. Options:

  • (empty) – None
  • left – Left
  • center – Center
  • right – Right
text_align(empty)text_align="textright"Text alignment for elements within your box. Options:

  • (empty) – Inherit
  • textleft – Left
  • textcenter – Center
  • textright – Right
width(empty)width="200px"The CSS width of the box in pixels, e.g. “200px” or “30%”.
convertcvt-phone-ldspconvert="cvt-phone-ptr"This is a responsive option. It gives you the choice to select when you want the box to convert to full width if a width has been set:

  • (empty) – None
  • cvt-phone-ptr – Phone portrait
  • cvt-phone-ldsp – Phone landscape
  • cvt-tablet-ptr – Tablet landscape
  • cvt-tablet-ldsp – Tablet landscape
hide(empty)hide="hide-phone"This gives you the ability to hide this shortcode on the devices you select:

  • (empty) = None
  • hide-phone-ptr = Phone portrait
  • hide-phone = Phone landscape
  • hide-tablet-ptr = Tablet portrait
  • hide-tablet = Tablet landscape
  • hide-desktop = Desktop
  • hide-large = Large

Examples

[box]This is a basic box[/box]
[box type="success" width="300px" align="center"]Lorem ipsum dolor sit amet.[/box]

Still having trouble? Head over to the forums.

Forums