Section Settings
In the Page Builder editing interface, hovering over a Section displays a quick toolbar with common actions for that block.
Quick Toolbar
| Icon | Name | Description |
|---|---|---|
| Drag | Drag to reposition the Section | |
| Delete Section | Delete the current Section (including all its child elements) | |
| Save Section | Save the current Section as a custom template for reuse on other pages | |
| Duplicate Section | Duplicate the current Section, creating an identical copy | |
| AI Edit | Use AI to assist editing the current Section | |
| Section Settings | Open the Section properties panel | |
| Add Section | Add a new Section below the current one |
Properties Panel
Click the button to open the properties panel, which contains five tabs: General, Background, Design, Fixed Element, and Permissions.
Responsive settings
Fields in the panel marked with breakpoint icons (such as width, spacing, font size, etc.) can be configured independently per responsive breakpoint, setting different values for different devices.
General
| Field | Description |
|---|---|
| Interior Container Width | The width of the Section's inner container; presets or custom values available |
| Height | The height of the Section; Auto or a custom value |
| Container Horizontal Alignment | Horizontal alignment of container content: left / center / right |
| Container Vertical Alignment | Vertical alignment of container content: top / center / bottom |
| No top spacing | Remove the top padding of the Section |
| No bottom spacing | Remove the bottom padding of the Section |
| No left and right spacing | Remove the left and right padding of the Section so content fills the width |
| Light Text | Use light-colored text within the Section; suitable for dark backgrounds |
| Container Visibility | Control the Section's visibility per device; click device icons to toggle |
| ID | Custom HTML ID for anchor links or CSS/JS targeting |
| Class | Custom CSS class name for personalized styling |
Background
Configure the Section's background effect, with five sub-tabs:
| Sub-tab | Description |
|---|---|
| Color | Solid color background |
| Image | Background image; position, repeat, and size mode can be set |
| Overlay | Overlay a color or gradient mask on the background; opacity adjustable |
| Video | Background video; upload or link a video file for a dynamic background |
| Shape | Decorative shape effects such as waves, slants |
Design
Configure the Section's styling details, with four sub-tabs:
Text
Global styling for text within the Section:
| Field | Description |
|---|---|
| Color | Text color |
| Text Align | Horizontal alignment (Left / Center / Justify / Right) |
| Vertical Align | Vertical alignment (Top / Middle / Bottom) |
| Font Size | Font size |
| Line Height | Line height |
| Font Weight | Font weight (100~900 / Bold / Normal) |
| Font Style | Font style (Italic / Normal) |
| Text Transform | Case transformation (Uppercase / Lowercase / Capitalize / None) |
| Text Decoration | Decoration line (Underline / Line-through / Overline / None) |
| Letter Spacing | Letter spacing |
| Word Spacing | Word spacing |
| Font Family | Font family |
Spacing
The Section's padding and margin.
Width
The Section's width properties.
Border
Border width, style, color, border radius, etc.
Fixed Element
Set elements within the Section that need to be fixed, such as floating buttons or content fixed on scroll.
Permissions
Specify which roles can view this Section.