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.
| Option | Default | Example | Description |
|---|---|---|---|
| type | basic | type="success" | The type of box will determine how it looks:
|
| 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:
|
| text_align | (empty) | text_align="textright" | Text alignment for elements within your box. Options:
|
| width | (empty) | width="200px" | The CSS width of the box in pixels, e.g. “200px” or “30%”. |
| convert | cvt-phone-ldsp | convert="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:
|
| hide | (empty) | hide="hide-phone" | This gives you the ability to hide this shortcode on the devices you select:
|
Examples
[box]This is a basic box[/box]
[box type="success" width="300px" align="center"]Lorem ipsum dolor sit amet.[/box]