# 3.1. Hình ảnh

Tiện ích **Hình ảnh** cho phép bạn chèn và tùy chỉnh hình ảnh trên landing page, giúp tăng tính thẩm mỹ và thu hút sự chú ý của người dùng. Bạn có thể sử dụng hình ảnh để giới thiệu sản phẩm, dịch vụ, hoặc tạo điểm nhấn cho các phần nội dung khác trên trang.

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

## **1. Thêm Hình ảnh vào landing page**

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

<figure><img src="/files/9V8Za16SDssnvJwcq2HW" alt=""><figcaption></figcaption></figure>

**Lưu ý:**

* Các loại tệp hình ảnh được hỗ trợ bao gồm: PNG, JPG, JPEG, GIF, SVG, SVG+XML, ICO, X-ICON, WEBP
* Mỗi trang landing page có thể chứa tối đa 15.000 tệp phương tiện, bao gồm hình ảnh, âm thanh và các tệp khác. Nếu vượt quá giới hạn này, sẽ có thông báo lỗi. Giới hạn kích thước cho mỗi tệp là 200MB.
* Tệp hình ảnh không nên chứa khoảng trắng hoặc ký tự đặc biệt.
* Khi tải ảnh lên để sử dụng trên trang landing page của bạn, hãy đảm bảo rằng bạn đã nhận được sự cho phép từ các nhiếp ảnh gia, doanh nghiệp hoặc các bên thứ ba khác.
* Việc sử dụng tiện ích hình ảnh không thay đổi hình nền của trang. Thay vào đó, nó thêm một hình ảnh vào một hàng hoặc cột.&#x20;

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

### 2.1. Trình chỉnh sửa nội dung

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

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

* **Thay đổi hình ảnh:** Cho phép người dùng thay đổi hình ảnh theo ý thích bằng cách nhấn vào biểu tượng <img src="/files/lcLncsFY8bjIHoutKonx" alt="" data-size="line">.
* **Xóa:** Khi thực hiện xóa hình ảnh, nội dung thay thế sẽ được hiển thị.
* **Nội dung thay thế:** Văn bản thay thế sẽ được hiển thị trong trường hợp hình ảnh tải bị lỗi.

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

Để mở trình chỉnh sửa **Thiết kế,** bạn click vào **Hình ảnh** 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/HpK4W7LAy9QsosqFffHe" alt=""><figcaption></figcaption></figure>

* **Căn chỉnh:** giúp bạn căn chỉnh **Hình ảnh** 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:** trong trình chỉnh sửa thiết kế giúp bạn điều chỉnh kích thước và vị trí của các phần tử trên trang landing page, 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ị:** cho phép bạn kiểm soát việc hiển thị **Hình ảnh** trên các thiết bị khác nhau 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 và hiệu ứng đổ bóng của **Hình ảnh** đã 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 **Hình ảnh,** 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.3. Trình chỉnh sửa nâng cao

Để mở trình chỉnh sửa **Nâng cao,** bạn click vào **Hình ảnh** 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/M7TZs09TSbQvdUIao3Jp" 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: 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://docs.shopone.io/cac-phan-tu-co-ban/tien-ich-phuong-tien/hinh-anh.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.