1. Tổng quan

• Định nghĩa: Landing Page Editor là giao diện làm việc chính giúp người dùng kéo thả, tùy biến và thiết kế các phần tử trên trang.
• Mục đích: Hiểu rõ cách sử dụng các thanh công cụ (Left Bar, Top Bar, Right Bar) sẽ giúp bạn thao tác nhanh và tối ưu giao diện trên đa thiết bị.
• Đố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).

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

• Bài viết trước: Tổng quan về Landing Page Builder
• 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. Các bước thực hiện

3.1. Các chức năng left bar

• Danh mục phần tử trên trang: chứa các phần tử cốt lõi. Nhấn giữ và kéo thả vào khung thiết kế.
• Thư viện: Quản lý các block/section đã lưu.
• Quản lý theme & Quản lý font chữ: Thiết lập màu sắc và font chữ tổng thể.
• Cài đặt chung:
• SEO Google và social: Thiết lập thẻ SEO.
• Tích hợp chuyển đổi: Chèn mã theo dõi.

3.2. Các chức năng top bar

Quản lý điểm ngắt (breakpoint):

• Điểm ngắt đại diện cho một phạm vi kích thước màn hình hay loại thiết bị. Ví dụ: điểm ngắt 1000px đại diện cho tablet, 480px đại diện cho mobile.
• Bạn có thể thêm, xóa, sửa điểm ngắt ở bất cứ kích thước nào (Tối đa 10 điểm).

Chế độ sửa/di chuyển:

• Chế độ di chuyển giúp nhấn giữ để kéo màn hình thiết kế.

Chức năng undo/redo

• Hoàn tác lại thao tác cũ.

Chức năng zoom

• Phóng to/thu nhỏ tại vị trí con trỏ.

Chức năng xem trước

• Xem trước trang thiết kế.

3.3. Các chức năng right bar

Cài đặt chung

• Cài đặt nền trang, web live chat, thanh cuộn.

Trạng thái – Sự kiện

• Thiết kế riêng cho các sự kiện xảy ra đối với phần tử.
  • Bình thường: Trạng thái mặc định của phần tử
  • Di chuột (Hover): Trạng thái khi di chuột lên trên phần tử
  • Vô hiệu (Disable): Trạng thái vô hiệu của phần tử
  • Nhấn (Pressed): Trạng thái khi nhấn giữ nút bấm

Kích thước

• Điều chỉnh chiều rộng/cao, chiều rộng/cao nhỏ nhất, chiều rộng/cao lớn nhất và đơn vị kích thước.

#	Đơn vị	Loại	Mô tả
1	px (pixel)	Cố định	Là đơn vị kích thước theo độ phân giải màn hình trên desktop. Là đơn vị kích thước vật lý của màn hình trên thiết bị mobile hay tablet.
2	% (Phần trăm)	Linh động	Là đơn vị đo lường tỷ lệ kích thước của phần tử với phần tử cha chứa nó. Tính theo phần trăm vd: 50% là tỷ lệ 1/2, 100% là tỷ lệ 1/1
3	Chiều rộng cổng nhìn(vw)	Linh động	Là đơn vị đo lường tỷ lệ kích thước của phần tử với kích thước chiều rộng khung nhìn. Tính theo phần trăm vd: 50vw là tỷ lệ 1/2, 100vw là tỷ lệ 1/1
4	Chiều cao cổng nhìn(vh)	Linh động	Là đơn vị đo lường tỷ lệ kích thước của phần tử với kích thước chiều cao khung nhìn. Tính theo phần trăm vd: 50vh là tỷ lệ 1/2, 100vh là tỷ lệ 1/1
5	Tính toán	Linh động	Là phép tính toán giữa hai giá trị đơn vị

Vị trí

Sticky

• Là thành phần hỗ trợ tạo ra phần tử “dính” trên màn hình đầu trang khi người dùng tiến hành cuộn trang, hoạt động cố định trên phần tử cha giúp cố định phần từ này trên đầu khi phần tử cha đang được cuộn
• Yêu cầu: Chiều dài phần tử cha đủ lớn, chiều cao phần tử sticky < chiều cao phần tử cha chứa nó
• Trên LDP, mỗi phần được sticky sẽ nằm ngay bên dưới element section, hay còn được gọi là “Phần”. Khi được gán “sticky” sẽ có thiết lập vị trí “top” để ghim cách đầu trang bao nhiêu

Chốt

• Chốt cố định vào vùng chứa hoặc chốt cố định vào trang.

Vị trí trên ô lưới

• Chọn vị trí phần tử trên ô lưới bằng cách click chọn ô lưới

• Chọn vị trí phần tử nằm trên nhiều ô lưới bằng cách nhấn giữ và kéo

Trạm nối

• Neo phần tử với các cạnh (trên, dưới, trái, phải, trung tâm). Giữ phím Shift để neo cả hai cạnh đối diện.

Khoảng cách lề (margin)

• Là khoảng cách lề bên ngoài phần tử.

Khoảng đệm (padding)

• Là khoảng cách lề trong phần tử.

Nội dung tràn

• Thể hiện các phần nằm bên ngoài vùng chứa nó hiển thị như thế nào. Có ba loại là Hiện, Ẩn và Cuộn. Mặc định nội dung sẽ là Hiện.

Transform

Clip path

• Cắt phần tử theo hình chữ nhật, hình tròn, hình elip, hình đa giác, vector (định dạng svg).

Neo

• Tạo điểm neo trên trang

3.4. Các chức năng thiết kế

Nền

• Màu: Tô màu trơn.

• Gradient:
  • Linear (Tạo, Sửa màu, Thêm màu, Sửa góc) và
  • Xuyên tâm (Tạo, chỉnh bán kính, tâm). Có thể tạo thêm lớp Gradient.

• Ảnh: Thêm ảnh nền, vị trí ảnh nền, kích thước ảnh nền, lặp lại ảnh nền.

• Đường viền: Chỉnh sửa viền phần tử.

• Bo góc: Bo tất cả các góc hoặc Bo chi tiết từng góc.

• Đổ bóng: Đổ bóng phần tử.

3.5. Các chức năng layer toolbar và Thao tác khác

• Hiệu ứng động (Animation): Chọn hiệu ứng, cấu hình (Hàm chuyển động, khoảng thời gian, độ trễ, lặp).

• Hiệu ứng chuyển tiếp (transition): Hàm chuyển động, Chọn thuộc tính, Khoảng thời gian, Độ trễ.

• Liên kết: có thể liên kết đến URL, đến điểm neo, đến đầu/cuối trang, đến file upload, đến email/sđt, đến popup.

• Thao tác khác: Cắt, Sao chép, Dán, Nhân đôi, Sao chép thiết kế, Sao chép hiệu ứng động, Sao chép transition, Xoay, Sắp xếp (Tiến lên, Lên đầu, Lùi lại, Xuống dưới), Ẩn, Xóa.

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.
• Lưu ý về Sticky: Chiều dài phần tử cha đủ lớn, chiều cao phần tử sticky phải < chiều cao phần tử cha chứa nó.
• Lưu ý về Breakpoint: Tất cả các chỉnh sửa giao diện tại điểm ngắt sẽ chỉ có ảnh hưởng đến phạm vi kích thước màn hình của điểm ngắt trở xuống. Điều này giúp thiết kế tối ưu cho từng loại màn hình.

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.

7. Bước tiếp theo

• Tra cứu các phần tử