Boxes

Inserting Boxes

Boxes can be styled in a variety of ways to achieve the look required by modifying a combination of settings such as size, background color/border-color, text color and border style.

Step 1: Switch To Backend Editor

To insert a box, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Boxes

Click "Box" in the Visual Composer Modal to insert a box, for example:

Box
Step 3: Add Content and Edit Box Settings

Once the box element has been inserted click the Edit Link(pen icon) of the box, for example:

Box Settings

Here is an overview of available box options:

  • Box Content

    Whether the box content should be left, center or right aligned.

  • Dismissable

    If this option is checked, the box will become a dismissable box, meaning the user can remove it.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Type

    Choose box type: info, success, warning, alert, or custom (your own color)

  • Border Style

    Choose whether the tabs should have sharp or rounded corners.

  • Size

    Set the box size to either small, medium, large, extra large, or custom. Determined by content padding.

  • Box Top/Bottom Padding

    Sets the top/bottom padding of the box. Note: this option is dependent upon that Size is set to Custom.

  • Box Left/Right Padding

    Sets the left/right padding of the box. Note: this option is dependent upon that Size is set to Custom.

Can't find what you're looking for? Submit a request in our forum.