1. Tổng quan

• Định nghĩa: Bài viết tổng hợp ý nghĩa và cách thiết lập thuộc tính cho toàn bộ các phần tử (Elements) cấu thành nên Landing Page.
• Lợi ích/Giá trị: Giúp người dùng nắm vững công cụ, lựa chọn đúng loại phần tử phù hợp với ý đồ thiết kế, tối ưu hóa giao diện trang.
• Đối tượng sử dụng: Marketer, Designer.

2. Giải thích Thuật ngữ & Thông số

• Padding: Khoảng cách từ nội dung của phần tử đến viền bên trong của nó.
• Margin: Khoảng cách từ viền ngoài của phần tử này đến phần tử khác.
• Box-shadow: Hiệu ứng đổ bóng cho phần tử.

3. Điều kiện tiên quyết (Prerequisite)

• Bài viết trước: Làm quen giao diện Editor
• Phân quyền: Tài khoản Mobio phải được cấp quyền RBAC: LANDING-PAGE. Xem hướng dẫn phân quyền truy cập RBAC tại đây.
• Đường dẫn truy cập: Marketing → Landing Page → Landing Page Builder → Nhấp vào tên trang để mở Editor.

4. Danh sách các phần tử thiết kế

4.1. Nhóm CƠ BẢN

Cung cấp các thành phần cấu thành nên nội dung chính:

• Tiêu đề: Khối văn bản lớn (Heading H1-H6) để đặt tên mục.
• Văn bản: khối đoạn văn (Paragraph) để viết nội dung chi tiết.
• Nút bấm: Nút kêu gọi hành động (CTA).
• Hình ảnh: Khối để tải lên hình ảnh minh họa.
• Biểu tượng: chèn icon dạng vector.
• Lớp nền: Khối dùng để tạo nền màu sắc hoặc hình ảnh nằm dưới các phần tử khác.
• Bảng: Trình bày dữ liệu đa chiều dưới dạng dòng và cột.
• Danh sách: Trình bày nội dung dạng gạch đầu dòng (Bullet list) hoặc số thứ tự.
• Kẻ ngang: Đường phân cách nằm ngang để ngắt quãng nội dung.
• Kẻ dọc: Đường phân cách nằm dọc.

4.2. Nhóm BỐ CỤC

Cung cấp các khung xương để sắp xếp hiển thị trên trang:

• Vùng chứa: khối bao bọc cơ bản để gom nhóm các phần tử khác vào trong.
• Xếp chồng: Cho phép đặt nhiều phần tử đè lên nhau theo các lớp (layer).
• Bố cục lặp: Lặp lại một mẫu thiết kế (template) có sẵn nhiều lần liên tiếp.
• Tab: Trình bày nội dung dạng thẻ chuyển đổi, giúp thu gọn màn hình.
• Accordion: Trình bày nội dung dạng danh sách xổ dọc (thường dùng làm FAQ).

4.3. Nhóm FORM

Dùng để thu thập thông tin khách hàng (Lead generation):

• Contact Form: Khung bao bọc chứa toàn bộ biểu mẫu liên hệ.
• Nhập chữ: Trường điền văn bản (Tên, Email, SĐT…).
• Nhập số: Trường điền dữ liệu dạng chữ số.
• Slider: Thanh trượt để chọn giá trị số học trong một khoảng.
• Radio: Tùy chọn chỉ cho phép chọn 1 đáp án duy nhất.
• Checkbox: Tùy chọn cho phép chọn nhiều đáp án.

4.4. Nhóm MEDIA

Các phần tử liên quan đến đa phương tiện và hiệu ứng động:

• Slider: Trình chiếu nhiều nội dung/hình ảnh trượt ngang (Carousel).
• Youtube Video: Nhúng video bằng đường link từ nền tảng Youtube.
• Bộ đếm: Đồng hồ đếm ngược thời gian (thường dùng cho các Flash Sale).
• Bộ sưu tập: Trình bày nhiều hình ảnh dưới dạng lưới (Gallery).

4.5. Nhóm KHÁC

Các phần tử nâng cao hỗ trợ điều hướng và mã tùy chỉnh:

• Menu: Thanh điều hướng chứa các liên kết của Landing Page.
• Menu hamburger: Biểu tượng 3 gạch ngang dùng để ẩn/hiện menu trên giao diện mobile.
• Mã code: Phần tử cho phép nhúng trực tiếp các đoạn mã HTML/CSS/JS.
• Đánh giá: Hiển thị biểu tượng ngôi sao để mô phỏng tính năng Rating/Đánh giá.

5. Quy tắc vận hành

• Để đảm bảo không xô lệch giữa các phần tử trên một màn hình thiết kế, hoặc xô lệch thiết kế giữa các màn hình, nên kéo thả phần tử vào đúng vùng chứa (Ví dụ: Bắt buộc thả Text vào bên trong Column, không thả lơ lửng ngoài Section).
• Dữ liệu Form khi được khách điền sẽ tuân thủ cấu hình đồng bộ dữ liệu qua Data Flow. Xem chi tiết tại Quản lý Connector: Dạng Contact Form (Tự động khởi tạo).

6. Các câu hỏi thường gặp (FAQ)

• Hỏi: Làm sao để thay đổi font chữ cho toàn bộ Landing Page thay vì từng Element Text một?
  • Trả lời: Bạn có thể cấu hình font chữ mặc định ở mục Kiểu chữ, sau đó chọn font đã cấu hình ở cột thiết kế (bên phải)

7. Bước tiếp theo

• Thiết kế nâng cao