> For the complete documentation index, see [llms.txt](https://docs.shopone.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.shopone.io/cac-phan-tu-co-ban/tien-ich-co-ban/hinh-khoi.md).

# 2.3. Container

Tiện ích **Container** là một công cụ hữu ích giúp bạn tạo các khối hộp nội dung trên landing page một cách dễ dàng. Bạn có thể tạo ra các khung chứa văn bản, hình ảnh, video, hoặc bất kỳ thành phần nào khác mà bạn muốn làm nổi bật trên trang.

## **1. Thêm Container vào trang landing page**

* Nhấn vào **Tiện ích** ở thanh sidebar của trình chỉnh sửa.
* Chọn **Container** trong mục **Cơ bản.**
* Chọn phần tử **Container** và kéo vào trang landing page.

<figure><img src="/files/oa5uzBsokFPbsyItcC2B" alt=""><figcaption></figcaption></figure>

## **2. Trình chỉnh sửa Container**

### 2.1. Trình chỉnh sửa thiết kế

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào **Container** muốn chỉnh sửa trên màn hình ⇒ Chọn **Thiết kế** trên thanh thiết lập nhanh.

<figure><img src="/files/mPTe4NazEPn9q03GKMPP" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh **Container** theo khung chứa, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/can-chinh.md).
* **Kích thước:** Điều chỉnh kích thước của **Container**, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/kich-thuoc.md).
* **Hiển thị:** Xác định các thiết bị mà **Container** sẽ được hiển thị bao gồm Máy tính và Điện thoại
* **Thiết kế:** cho phép bạn thay đổi màu nền, overflow và hiệu ứng đổ bóng của **Container** đã chọn, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/thiet-ke.md).
* **Đường viền:** cho phép bạn thêm và tùy chỉnh viền xung quanh của **Container**, bạn cũng có thể điều chỉnh độ bo tròn của viền, chi tiết [<mark style="color:blue;">**tại đây**</mark>](/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-thiet-ke/duong-vien.md).

### 2.2. Trình chỉnh sửa nâng cao

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào **Container** muốn chỉnh sửa trên màn hình ⇒ Chọn **Nâng cao** trên thanh thiết lập nhanh.

<figure><img src="/files/H91pfz69oODrc38Ficvh" alt=""><figcaption></figcaption></figure>

* **Sự kiện:** Cho phép bạn thiết lập sự kiện cho hành động khi nhấp chuột hoặc hover vào tiện ích, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/su-kien).
* **Hiệu ứng:** Cho phép bạn thêm các hiệu ứng động cho tiện ích trên landing page để tạo sự thu hút và sinh động hơn, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/hieu-ung).
* **Đồng bộ thiết kế Máy tính/ Điện thoại:** Cho phép bạn cài đặt tùy chọn đồng bộ thiết kế giữa máy tính và điện thoại, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/dong-bo-thiet-ke-may-tinh-dien-thoai).
* **Kiểu định vị:** Cho phép bạn lựa chọn kiểu định vị phù hợp để tối ưu hóa trang web và mang lại trải nghiệm tốt nhất cho khách hàng, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/kieu-dinh-vi).
* **Tùy chỉnh nâng cao:** Cho phép bạn tùy biến giao diện và hành vi của thành phần thông qua các lớp CSS và mã CSS tùy chỉnh, chi tiết [**tại đây**](https://docs.shopone.io/cac-cong-cu-thiet-lap-co-ban-voi-landing-page/thanh-thiet-lap-nhanh/trinh-chinh-sua-nang-cao/tuy-chinh-nang-cao).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.shopone.io/cac-phan-tu-co-ban/tien-ich-co-ban/hinh-khoi.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
