Skip to content

Column Settings

In the Page Builder editing interface, click the button on a Column to open the Column Settings properties panel. The panel contains five tabs: General, Background, Design, Layout, and Animation.

Responsive settings

Fields in the panel marked with breakpoint icons (such as width, order, etc.) can be configured independently per responsive breakpoint, setting different values for different devices.


General

Width

The width ratio of the Column, based on a 12-column grid system. Preset ratios or Auto (auto-fill remaining space) are available.

Available widths: 1/12, 1/6, 1/4, 1/3, 5/12, 1/2, 7/12, 2/3, 3/4, 5/6, 11/12, 1/1, 1/5, 2/5, 3/5, 4/5, Auto.

Order

The display order of the Column; lower numbers come first.

Start Full Width

When enabled, this Column fills the full Row width starting from the top.

End Full Width

When enabled, this Column fills the full Row width ending at the bottom.

Container Visibility

Control the Column'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 Column's background effect, with sub-tabs: Color, Image, Overlay, Video, Shape. The settings are the same as Section Background.


Design

Configure the Column's styling details, with sub-tabs: Text, Spacing, Width, Border. The settings are the same as Section Design.


Layout

Configure the Column's layout properties, such as positioning and display type.


Animation

Add entrance animation effects to the Column; supports setting animation type, delay time, duration, and more.