Skip to content

Box Editor

The Box Editor is a visual interface to build Box Pages.

Changing the menu item's label

By default, the Box Editor is available under a Content main menu item. You can change this label in the backend settings of the OFFLINE.Boxes plugin.

Container detection

When hovering over Boxes in the editor, it tries to detect any container that wraps your content and place the purple "focus rectangle" over that container.

This auto-detection makes sure that the editor highlights only the relevant content section of a Box and does not span the whole width of the screen.

The auto-detection looks for a .container or .wrapper element. If one is found, it is used to calculate the position of the focus rectangle.

If no element is found, the Box's parent element will be highlighted by the focus rectangle.

Manually set a container

In some cases, the auto-detection does not work as intended. To manually define a Box container add a data-boxes-container attribute on the container element in your Box partial.

If a data-boxes-container element is detected, it will be used to calculate the focus rectangle's position.

<div class="some-wrapper" data-boxes-container>
    <h1>{{ box.title }}</h1>

Add padding to the focus rectangle

Optionally, a padding can be defined using the data-boxes-container attribute to add a top and bottom padding to the focus rectangle. This is useful if the focus overlaps some of the Box's content.

<div class="container" data-boxes-container="100">
        I am focused with 100px padding
        at the top and at the bottom


It is possible to customize the Editor appearance and the appearance of your theme inside the editor.

See Editor Customization for more details.