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ố

N/A

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. Văn bản

• Khi sửa văn bản, người dùng có thể chỉnh sửa: phông chữ, kích thước chữ, màu chữ, màu nền chữ, tô đậm, in nghiêng, gạch dưới, gạch chữ, đánh số, danh sách gạch đầu dòng, thụt dòng, giảm thụt dòng, chữ trên, chữ dưới, liên kết, hủy liên kết, icon, ký tự, xóa định dạng.
• Bên cạnh đó, người dùng cũng có thể chỉnh sửa chủ đề chữ và chỉnh sửa kiểu chữ để áp dụng đồng bộ.

4.2. Nút bấm

• Sửa nội dung
• Loại nút bấm: (Chỉ văn bản, Văn bản và biểu tượng, Chỉ biểu tượng)
• Vị trí văn bản và biểu tượng, khoảng cách văn bản và biểu tượng.
• Biểu tượng: Thiết lập màu, kích thước, tỷ lệ, góc quay cho biểu tượng bên trong nút.
• Căn chỉnh
• Thiết kế: Thiết lập màu, đường viền, bo góc, sửa kiểu chữ.

4.3. Hình ảnh

• Thay ảnh
• Chọn kích thước ảnh, Kéo căng ảnh
• Chế độ hiển thị
• Vị trí ảnh
• Văn bản thay thế
• Tỷ lệ ảnh (Chiều cao / Chiều rộng)

4.4. Biểu tượng

• Thiết kế: màu, kích thước, tỷ lệ so với khung chứa, góc quay.
• Quản lý biểu tượng: Chọn từ Danh sách Biểu tượng chung, Danh sách Biểu tượng của merchant, hoặc Danh sách Biểu tượng trên trang.

4.5. Cơ bản – Bảng

• Sửa text
• Thêm hàng, Thêm cột, Xoá hàng, Xoá cột
• Hợp nhất ô, Huỷ hợp nhất ô
• Màu nền ô, Đường viền ô, Kiểu chữ
• Màu nền hàng chẵn, Màu nền hàng lẻ
• Căn chỉnh chữ

4.6. Danh sách

• Sửa chữ
• Số cột
• Khoảng cách biểu tượng và chữ, Khoảng lề trên biểu tượng
• Ẩn biểu tượng, Thay đổi biểu tượng
• Thêm Item, Xoá item

4.7. Đường kẻ

• Đường kẻ: Chỉnh chiều rộng, màu, kiểu.

4.8. Lớp nền

• Có thể chỉnh sửa thiết kế màu nền, đường viền, bo góc, đổ bóng của lớp nền.

4.8. Các phần tử Khác (Menu, Mã code, Đánh giá)

• Menu: Thiết lập mục menu, Xoá mục menu, Thêm liên kết mục, Hướng, Lấp đầy.

• Mã code: Thêm mã code.

• Đánh giá: sửa đánh giá, khoảng cách, màu.

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).
• Đảm bảo thêm “Văn bản thay thế” cho các hình ảnh quan trọng để hỗ trợ khả năng tìm kiếm (SEO).
• Thay đổi thiết kế của “Biểu tượng” phải xét tỷ lệ so với khung chứa để không bị tràn khung.
• Điều chỉnh các thuộc tính như “Chủ đề chữ” sẽ giúp quản lý tính đồng nhất toàn trang hiệu quả hơn so với việc thay đổi phông chữ từng đoạn văn bản đơn lẻ.

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

• Sử dụng các Phần tử bố cục, media và popup trong thiết kế Landing Page
• Thiết kế nâng cao