# Trình dựng Landing Page

## 1. Giới thiệu chung

Trình dựng Landing Page là công cụ hỗ trợ bạn thiết kế và xuất bản các trang web đơn lẻ (landing page) một cách nhanh chóng mà không cần kiến thức chuyên sâu về lập trình. Mục đích chính của công cụ này là tối ưu hóa quy trình chuyển đổi, giúp bạn tạo ra các trang giới thiệu sản phẩm, sự kiện hoặc thu thập thông tin ứng viên với giao diện chuyên nghiệp và tương thích đa thiết bị.

***

## 2. Các thành phần chính trên giao diện

Giao diện được thiết kế tối giản, tập trung vào trải nghiệm kéo-thả. Bạn có thể chia khu vực làm việc thành 3 phần chính:

* Thanh công cụ phía trên (Top Bar): \* Chứa các công cụ chỉnh sửa nhanh (Undo/Redo, chèn văn bản, hình ảnh).
  * Chế độ xem trước (Preview) trên các thiết bị: Desktop, Tablet và Mobile.
  * Nút Publish Changes để lưu và hiển thị các thay đổi mới nhất lên trang web thực tế.
* Thư viện thành phần (Left Sidebar): \* Search Template: Tìm nhanh các mẫu có sẵn.
  * Basic: Các thành phần cơ bản như Nút (Button), Văn bản (Text).
  * Structure: Các khối nội dung dựng sẵn (Section) như Footer, Hero Section, giúp bạn lắp ghép trang web cực kỳ nhanh chóng.
* Khu vực thiết kế trung tâm (Canvas): \* Nơi hiển thị trực quan landing page của bạn. Bạn có thể chọn trực tiếp vào các phần tử trên màn hình để thay đổi nội dung hoặc vị trí.
* Bảng thuộc tính (Right Sidebar): \* Khu vực này sẽ xuất hiện khi bạn chọn một thành phần cụ thể để tùy chỉnh chi tiết về màu sắc, font chữ, kích thước hoặc các kịch bản (script) nâng cao.

***

## 3. Quy trình 5 bước tạo landing page chuyên nghiệp

### **Bước 1: Thiết lập cấu trúc khung (Layout)**

Trước khi đi vào chi tiết, bạn cần dựng "khung xương" cho trang bằng các khối nội dung lớn.

* Kịch bản (Scenario): Bắt đầu một trang trắng và muốn có bố cục nhanh.
* Giải pháp (Solution): Truy cập mục Structure, chọn các nhóm như Hero Sections (cho đầu trang), Quick Grid (cho danh sách tính năng) và Footers (cho chân trang) rồi kéo thả vào vùng thiết kế.
* Mẹo (Tip): Sử dụng Hero 2 (bố cục chia đôi) nếu bạn muốn kết hợp lời chào mời bên trái và hình ảnh sản phẩm bên phải để tăng tính thuyết phục.

### **Bước 2: Tùy chỉnh nội dung và hình ảnh**

Sau khi có khung, hãy thay thế các thành phần mẫu bằng nội dung thực tế của bạn.

* Kịch bản (Scenario): Thay đổi tiêu đề, đoạn văn hoặc hình ảnh minh họa.
* Giải pháp (Solution): Chọn trực tiếp vào phần tử văn bản để nhập nội dung mới trong bảng Typography. Với hình ảnh, chọn phần tử và sử dụng thuộc tính BG Image trong bảng Style để tải ảnh lên.
* Mẹo (Tip): Thiết lập Object Fit: Cover cho hình ảnh để ảnh tự động lấp đầy khung mà không bị méo, bất kể kích thước khung thay đổi.

### **Bước 3: Cấu hình tương tác và nút bấm (CTA)**

Đảm bảo khách hàng có thể thực hiện hành động (đăng ký, mua hàng) thông qua các nút bấm.

* Kịch bản (Scenario): Gắn link cho nút "Đăng ký ngay".
* Giải pháp (Solution): Chọn nút bấm, tìm đến nhóm Link ở bảng thuộc tính bên phải. Tại trường Link To, chọn URL bên ngoài, trang nội bộ hoặc Anchor (điểm neo) trên cùng một trang.
* Mẹo (Tip): Sử dụng Target: New Tab (\_blank) khi dẫn link ra ngoài hệ thống để tránh khách hàng rời bỏ trang của bạn.

### **Bước 4: Tối ưu hiển thị đa nền tảng (Responsive)**

Kiểm tra và điều chỉnh để trang hiển thị hoàn hảo trên mọi thiết bị.

* Kịch bản (Scenario): Bố cục 3 cột trên máy tính bị quá nhỏ khi xem trên điện thoại.
* Giải pháp (Solution): Sử dụng bộ chuyển đổi chế độ xem (Desktop/Tablet/Mobile) ở thanh điều hướng phía trên. Ở chế độ Mobile, hãy chuyển từ cơ chế Grid sang Stack với hướng dọc để các nội dung xếp chồng lên nhau dễ đọc hơn.
* Mẹo (Tip): Kích hoạt tính năng Wrap (Ngắt dòng) trong mục Layout để các thành phần tự động nhảy xuống dòng mới khi màn hình hẹp lại.

### **Bước 5: Cấu hình SEO và Xuất bản**

Hoàn tất các thông số kỹ thuật để trang sẵn sàng tiếp cận người dùng.

* Kịch bản (Scenario): Chuẩn bị đưa trang vào hoạt động chính thức.
* Giải pháp (Solution): Vào biểu tượng Bánh răng (Settings) -> Current Page để điền Page Title, Meta Description và tải lên Favicon. Sau đó nhấn nút Publish Changes trên thanh công cụ.
* Mẹo (Tip): Đừng quên kiểm tra lại trạng thái Status là Published để trang có thể truy cập công khai qua đường dẫn URL.


---

# 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.mhiring.vn/mcms/trinh-dung-landing-page.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.