> For the complete documentation index, see [llms.txt](https://hifunnel.gitbook.io/hifunnel-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hifunnel.gitbook.io/hifunnel-help-center/documentation/documentation-vi/website-and-landing-page/page/customizing-section-layout-settings.md).

# Tùy chỉnh Cài đặt Layout cho Section

Hướng dẫn tùy chỉnh cài đặt Layout, khoảng cách Padding, Margin, chiều rộng khung và căn chỉnh cột cho Section trên trình dựng trang Hifunnel.

Cài đặt Layout của Section giúp bạn kiểm soát vị trí nội dung, khoảng cách căn lề (Padding & Margin), chiều rộng khung chứa (Container Width) và cách căn chỉnh các Cột bên trong từng Section (Khối) trên trang.

Bằng trình dựng trang Kéo & Thả Hifunnel, việc tùy chỉnh cài đặt Layout sẽ đảm bảo trang của bạn hiển thị đẹp mắt, hiện đại và chuẩn Responsive trên cả Máy tính, Máy tính bảng và Điện thoại di động.

***

## Các tùy chọn Layout chính

### Khoảng cách Padding & Margin

Padding kiểm soát khoảng trống nội bộ phía trên, dưới, trái, phải bên trong Section. Điều chỉnh Padding giúp bạn tạo không gian thoáng đãng cao cấp cho trang hoặc thu gọn khoảng cách giữa các khối.

### Chiều rộng khung chứa (Full Width vs. Boxed)

Lựa chọn cách hiển thị chiều rộng của Section:

* **Boxed / Container (Khung cố định)**: Giới hạn chiều rộng nội dung trong khoảng cố định (ví dụ: 1200px) và căn giữa trang trên màn hình máy tính lớn.
* **Full Width (Tràn màn hình)**: Mở rộng Section ra toàn bộ chiều rộng viền màn hình trình duyệt.

### Căn chỉnh Cột (Vertical & Horizontal Alignment)

Căn chỉnh các Cột và Widget bên trong Section:

* **Căn chỉnh theo chiều dọc**: Căn trên (Top), Căn giữa (Center), Căn dưới (Bottom), hoặc Chiều cao bằng nhau (Equal Height).
* **Căn chỉnh theo chiều ngang**: Căn trái (Left), Căn giữa (Center), Căn phải (Right), hoặc Căn đều khoảng cách (Space Between).

### Cấu hình Responsive & Hiển thị trên thiết bị (Desktop vs. Mobile)

Tùy chỉnh riêng khoảng cách Padding hoặc tính năng ẩn/hiện cho phiên bản Máy tính và Điện thoại:

* **Ẩn trên Máy tính (Hide on Desktop)**: Chỉ hiển thị Section khi học viên xem bằng điện thoại.
* **Ẩn trên Điện thoại (Hide on Mobile)**: Ẩn các khối thiết kế phức tạp trên mobile để tăng tốc độ tải trang cho điện thoại.

***

## Hướng dẫn các bước Tùy chỉnh Layout cho Section

{% stepper %}
{% step %}

#### Bước 1: Chọn Cài đặt Layout của Section

Trên màn hình thiết kế, di chuột vào Section cần chỉnh sửa và nhấp chọn **Block Settings** (hoặc nhấp kép vào đường viền Section).
{% endstep %}

{% step %}

#### Bước 2: Chuyển sang tab Layout / Spacing

Chọn tab **Layout** hoặc **Spacing** trên bảng điều khiển bên trái.
{% endstep %}

{% step %}

#### Bước 3: Điều chỉnh Padding & Margin

Nhập chỉ số pixel tùy chỉnh cho **Top Padding**, **Bottom Padding**, **Left Padding**, và **Right Padding** (hoặc kéo thanh trượt khoảng cách).
{% endstep %}

{% step %}

#### Bước 4: Cấu hình Khung chứa & Căn chỉnh

Lựa chọn giữa **Full Width** (Tràn lề) hoặc **Boxed** (Khung chuẩn), sau đó chọn kiểu căn chỉnh Cột dọc/ngang mong muốn.
{% endstep %}

{% step %}

#### Bước 5: Xem trước trên giao diện Mobile

Bật chế độ **Mobile View** trên thanh công cụ trên cùng để kiểm tra và tinh chỉnh khoảng cách Padding dành riêng cho điện thoại.
{% endstep %}

{% step %}

#### Bước 6: Lưu thay đổi

Nhấp nút **Save** ở góc trên màn hình để áp dụng cài đặt.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
**Mẹo thiết kế tối ưu trên Mobile:** Nếu một Section dạng 3-4 cột hiển thị bị chật chội trên màn hình điện thoại, hãy nhân bản Section đó, bật **Hide on Desktop** cho bản sao và đơn giản hóa các cột dành riêng cho người dùng di động!
{% endhint %}