Appearance
Box Settings
A Box is a content container within a Section. When you hover over a Box, a toolbar appears. Click the settings button in the toolbar to open the detailed settings panel.
Please watch the video below for detailed usage instructions.
Box Toolbar
When you hover over a Box, a floating toolbar appears in the top-right corner:
| Button | Name | Description |
|---|---|---|
| 🖼 | Background Image | Set Box background image |
| 📱 | Mobile Background | Set mobile background image |
| ▶ | Video Background | Set video background |
| 🔧 | Box Settings | Open Box settings panel |
| ➕ | Add Section | Add a new Section |
Box Settings Panel
After clicking the Box Settings button (blue wrench icon) in the toolbar, the settings panel will open with the following tabs:
- General — General settings
- Content — Content layout
- Text — Text styles
- Image — Background image (displayed after setting a background image)
General
Content Size
Set the width of the Box content area:
| Option | Description |
|---|---|
| Full | Fill the entire container width |
| Auto | Automatically adapt to content width |
| 380px ~ 1200px | Fixed width presets |
| - / + | Fine-tune width |
Background Color
Set the Box background color:
| Option | Description |
|---|---|
| Light | Light background |
| Grey | Grey background |
| Dark | Dark background |
| ◑ | Custom color picker |
| ✕ | Clear background color |
| Gradient | Gradient background |
Content
Position
Use the nine-grid button layout to control content alignment within the Box:
| ↖ Top Left | ↑ Top Center | ↗ Top Right |
|---|---|---|
| ← Middle Left | ☉ Center | → Middle Right |
| ↙ Bottom Left | ↓ Bottom Center | ↘ Bottom Right |
Vertical Fine-tune
Fine-tune the content position vertically. Supports - (move up), + (move down), and Not Set (reset).
Horizontal Fine-tune
Fine-tune the content position horizontally. Supports - (move left), + (move right), and Not Set (reset).
Text
Text Style
Set text color style: Light or Dark.
Opacity
Adjust text opacity. Supports + (increase), - (decrease), and Not Set (reset).
Alignment
Set text alignment:
| Option | Description |
|---|---|
| Left | Left-aligned |
| Center | Center-aligned |
| Right | Right-aligned |
| Justify | Justified |
Video
Click the Video Background button (▶ icon) in the Box toolbar to set a video background for the Section.
Setup Steps
- Click the ▶ Video Background button in the Section toolbar.
- Enter the video file URL in the popup panel. Supported formats:
- MP4 — Recommended format, best compatibility
- WebM — Smaller file size, supported by modern browsers
- The video will automatically loop and play muted.
Configuration Options
| Option | Description |
|---|---|
| Video URL | Enter the full path to the video file |
| Overlay Color | Set a video overlay color layer to improve text readability |
| Overlay Transparency | Adjust the transparency of the overlay layer |
Notes
- Video backgrounds do not play on mobile by default. It is recommended to also set a background image as a fallback for mobile devices.
- Video files should be compressed as much as possible, keeping them under 5MB to avoid affecting page load speed.
- Videos will automatically play muted and loop, complying with modern browser autoplay policies.
Image
Ken Burns Effect
When enabled, the background image will have a slow zoom/pan animation effect.
Parallax Effect
Set background parallax effect:
| Option | Description |
|---|---|
| None | No parallax |
| Fixed | The background stays fixed in place |
| Parallax on scroll | Scroll parallax |
After selecting scroll parallax, you can set the parallax factor for different breakpoints (XS / S / M / L / XL / XXL).
Overlay Color
Set an overlay color layer for the background image. You can choose White, Black, a custom color, or None.
Overlay Opacity
Adjust overlay layer opacity. Supports + (increase), - (decrease), and None (no overlay).
Horizontal Position / Vertical Position
Fine-tune the horizontal and vertical position of the background image.
Image Size
Set the background image fill mode:
| Option | Description |
|---|---|
| Auto | Automatic |
| Contain | Show the complete image |
| Cover | Cover the entire area |
| Custom | Custom size |
Repeat
Set background image repeat mode: no-repeat / repeat-x / repeat-y / repeat.
Remove Image
Remove the background image of the current Box.
Mobile Box Height
Set the Box height on mobile devices. You can choose to follow the background image height or set a custom pixel value.