# Bố cục (layout)

### 1.Thay đổi kích thước layout nội dung

Bạn chọn **Giao diện > Tùy biến > Layout**

![](https://huongdan.aditi.vn/wp-content/uploads/2022/05/93.png)

Bạn sẽ thấy giao diện như bên dưới, mặc định chiều rộng layout nội dung là 1080 như bên dưới

![](https://huongdan.aditi.vn/wp-content/uploads/2022/05/screenshot_1662438847.png)

Tại khu ô Container Width bạn có thể thay từ 1080 thành 1300 để kích thước layout nội dung website được rộng ra.

### 2.Chỉnh sửa bố cục website (Layout)

Để chỉnh sửa bố cục website, bạn hãy thao tác như sau:

Vào website của bạn, chọn **Flatsome** ➙ **Theme Options** ➙ **Layout** hoặc vào trang **Quản trị (Admin)** (thường có dạng <https://tên-miền-của-bạn.com/wp-admin>) chọn **Giao diện** ➙ **Tùy biến** ➙ **Layout**

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/09/93-1024x455.png" alt=""><figcaption></figcaption></figure>

Ở đây, đầu tiên bạn sẽ lựa chọn **Chế độ bố cục của website (Layout Mode)**

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/10/chinh-sua-layout-2.jpg" alt=""><figcaption></figcaption></figure>

* **Full Width** là Chế độ Chiều rộng đầy đủ
* **Boxed** là Chế độ Đóng hộp
* **Framed** là Chế độ Đóng khung

***Lưu ý:*** bạn chỉ có thể lựa chọn 1 trong 3 chế độ này mà thôi

Ở chế độ **Full Width** (tức Chế độ Chiều rộng đầy đủ), nó bao gồm:

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/10/chinh-sua-layout-3.jpg" alt=""><figcaption></figcaption></figure>

1. **Container width (px)** là ***Độ rộng của vùng chứa nội dung*** (Kích cỡ của nó được tính bằng pixel – px). Bạn thay đổi con số này thì độ rộng của website sẽ thay đổi (***Lưu ý:*** hãy để mặc định, không nên thay đổi con số này)
2. **Content Color** là ***Màu sắc của nội dung***: Ở đây bạn chỉ có thể chọn 2 dạng: đó là nội dung dạng sáng hoặc tối
3. **Content Background** là ***Nền của nội dung***

Ở chế độ **Boxed** (tức Chế độ Đóng hộp), nó bao gồm:

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/10/chinh-sua-layout-4.jpg" alt=""><figcaption></figcaption></figure>

1. **Add Drop Shadow to Content box** là ***Thêm đổ bóng vào phần hộp nội dung website***. Bạn tick vào ô này thì phần hộp nội dung của website sẽ có viền bóng
2. **Site width (px)** là ***Độ rộng của website*** (Kích cỡ của nó được tính bằng pixel – px). Bạn thay đổi con số này thì độ rộng của website sẽ thay đổi (***Lưu ý:*** hãy để mặc định, không nên thay đổi con số này)
3. **Background Color** là ***Màu nền của website***
4. **Background Image** là ***Hình nền của website***. Bạn thay đổi hình nền bằng cách nhấn vào nút **Select image** và chọn hình nền phù hợp
5. **Container width (px)** là ***Độ rộng của vùng chứa nội dung*** (Kích cỡ của nó được tính bằng pixel – px). Bạn thay đổi con số này thì độ rộng của website sẽ thay đổi (***Lưu ý:*** hãy để mặc định, không nên thay đổi con số này)
6. **Content Color** là ***Màu sắc của nội dung***: Ở đây bạn chỉ có thể chọn 2 dạng: đó là nội dung dạng sáng hoặc tối
7. **Content Background** là ***Nền của nội dung***

Ở chế độ **Framed** (tức Chế độ Đóng khung), nó bao gồm:

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/05/chinh-sua-bo-cuc-website-layout-2.jpg" alt=""><figcaption></figcaption></figure>

1. **Add Drop Shadow to Content box** là ***Thêm đổ bóng vào phần hộp nội dung website***. Bạn tick vào ô này thì phần hộp nội dung của website sẽ có viền bóng
2. **Site width (px)** là ***Độ rộng của website*** (Kích cỡ của nó được tính bằng pixel – px). Bạn thay đổi con số này thì độ rộng của website sẽ thay đổi (***Lưu ý:*** hãy để mặc định, không nên thay đổi con số này)
3. **Background Color** là ***Màu nền của website***
4. **Background Image** là ***Hình nền của website***. Bạn thay đổi hình nền bằng cách nhấn vào nút **Select image** và chọn hình nền phù hợp
5. **Container width (px)** là ***Độ rộng của vùng chứa nội dung*** (Kích cỡ của nó được tính bằng pixel – px). Bạn thay đổi con số này thì độ rộng của website sẽ thay đổi (***Lưu ý:*** hãy để mặc định, không nên thay đổi con số này)
6. **Content Color** là ***Màu sắc của nội dung***: Ở đây bạn chỉ có thể chọn 2 dạng: đó là nội dung dạng sáng hoặc tối
7. **Content Background** là ***Nền của nội dung***

Sau khi hoàn thành việc thay đổi bố cục của website, hãy nhấn nút **Đăng** ở phía trên để lưu và xuất bản bố cục mới.

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/05/chinh-sua-bo-cuc-website-layout-3.jpg" alt=""><figcaption></figcaption></figure>

### 3.Thay đổi màu nền background

Bạn sẽ vào Layout để đổi màu cho background. Bạn vào **Giao diện > Tùy biến > Layout > Content Background**

<figure><img src="https://huongdan.aditi.vn/wp-content/uploads/2022/09/92-1024x455.png" alt=""><figcaption></figcaption></figure>

Ở tại khu vực này, bạn có thể chọn màu của bạn muốn đặt cho website như hình ở bên dưới.

![](https://huongdan.aditi.vn/wp-content/uploads/2022/09/screenshot_1662439307.png)


---

# Agent Instructions: 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:

```
GET https://huongdan.webmatrix.vn/bo-cuc-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.