Định nghĩa: Hướng dẫn làm quen với không gian làm việc (Workspace) của Landing Page Editor và cách thiết lập các điểm ngắt (breakpoints) để thiết kế hiển thị tốt trên mọi thiết bị.
Lợi ích/Giá trị: Tối ưu hóa thời gian thiết kế, giúp nắm vững cấu trúc giao diện để thao tác kéo thả chính xác và mượt mà nhất.
Đối tượng sử dụng: Marketer, Designer.
2. Giải thích Thuật ngữ & Thông số
Workspace (Vùng thiết kế): Khu vực hiển thị trực quan bản xem trước (Preview) của trang.
Toolbar (Thanh công cụ): Khu vực chứa các tính năng quản lý phần tử, quản lý layer (lớp), và cài đặt chung.
Điểm ngắt (Breakpoint): Kích thước màn hình cụ thể mà tại đó giao diện sẽ thay đổi cách bố trí (Desktop, Tablet, Mobile).
Lịch sử thao tác (History): Lưu trữ các phiên bản chỉnh sửa để có thể Hoàn tác (Undo) hoặc Làm lại (Redo).
Đường dẫn truy cập: Marketing → Landing Page → Landing Page Builder → Nhấp vào tên trang để mở Editor.
4. Các bước thực hiện
4.1. Làm quen với Bố cục Editor
Khu vực Toolbar trái: Chứa menu thêm phần tử (Add Element), quản lý phần (Section)/phần tử (Element), quản lý Layer và thư viện.
Khu vực Thuộc tính (Properties Panel – Phải): Xuất hiện khi chọn một Element bất kỳ. Chứa các tab thiết lập về kiểu dáng (Style), kích thước (Size), màu sắc (Color).
Thanh công cụ trên (Top Bar): Chứa tính năng chuyển đổi thiết bị (Desktop/Mobile), Undo/Redo, Xem trước (Preview) và Xuất bản (Publish).
4.2. Thao tác Kéo thả cơ bản
Nhấp biểu tượng (+) Thêm mới ở Toolbar trái.
Kéo và thả một phần tử bất kỳ vào Workspace.
Nhấp chọn phần tử vừa thêm. Bảng thuộc tính bên phải sẽ hiện ra để tùy chỉnh chi tiết.
4.3. Quản lý Layer
Kéo thả các phần tử ở mục quản lý layer bên cột trái để thay đổi thứ tự, vị trí của các phần tử. Phần tử nằm trên cùng danh sách Layer sẽ hiển thị đè lên các phần tử bên dưới.
Nhấp biểu tượng Con mắt cạnh mỗi Layer để ẩn/hiện tạm thời phần tử đó trong lúc thiết kế.
4.4. Chuyển đổi và thiết kế đa màn hình (Breakpoints)
Nhấp biểu tượng Desktop, Tablet, hoặc Mobile ở thanh Top bar.
Điều chỉnh lại kích thước chữ, khoảng cách hoặc ẩn đi các phần tử không cần thiết trên mobile.
Mẹo nhỏ:
Hãy hoàn thiện thiết kế trên giao diện Desktop trước, sau đó mới chuyển sang Mobile để tinh chỉnh độ tương thích.
Mọi phần tử đều nên nằm trong các khối bố cục, như vậy khi sửa ở một màn hình sẽ hạn chế ảnh hưởng đến các màn hình khác.
5. Quy tắc vận hành
Quy tắc Kế thừa: Những thay đổi thuộc tính được thực hiện trên điểm ngắt lớn (Desktop) sẽ tự động áp dụng xuống điểm ngắt nhỏ (Tablet/Mobile) nếu điểm ngắt nhỏ chưa từng bị chỉnh sửa riêng rẽ thông số đó.
Nếu đã chỉnh sửa riêng biệt 1 thông số ở Mobile, thông số đó sẽ không bị ảnh hưởng nếu sau này sửa lại ở Desktop.
6. Các câu hỏi thường gặp (FAQ)
Hỏi: Làm sao để lấy lại phần tử lỡ tay xóa?
Trả lời: Sử dụng nút Undo (Hoàn tác) trên Top Bar hoặc phím tắt Ctrl+Z / Cmd+Z.
Hỏi: Thiết kế các phần tử trên Desktop rất đẹp nhưng chuyển sang Mobile bị xô lệch vị trí?
Trả lời: Nên đảm bảo các Element nằm trong một khối bố cục, như vậy sẽ hạn chế được việc chỉnh sửa tại một màn hình gây ảnh hưởng đến màn hình khác.
