Chỉnh sửa trang bằng trình kéo thả

Editor dùng để làm gì?#

Editor là nơi bạn chỉnh mọi trang trong LDPage: thêm hoặc sắp xếp section, sửa chữ trực tiếp trên canvas, đổi màu, cỡ chữ, bố cục theo từng màn hình Desktop/Tablet/Mobile, thêm form thu thông tin, popup và nhờ AI Agent sửa giúp. Mở editor bằng cách bấm vào một trang trong danh sách Trang, hoặc tự động sau khi tạo trang từ mẫu.

1. Bố cục màn hình editor#

1. 1

   Bên trái thanh trên: logo LDPage (về trang tổng quan), mũi tên ← Về danh sách trang, tên trang và trạng thái lưu: Đã lưu, Đang lưu…, Chưa lưu, Lỗi lưu — sẽ thử lại hoặc Xung đột — tải lại bản mới nhất. Hai nút cong là Hoàn tác (Ctrl+Z) và Làm lại (Ctrl+Shift+Z).

2. 2

   Giữa thanh trên: ba nút Desktop, Tablet, Mobile để chọn breakpoint đang chỉnh, và ô Mức phóng (Vừa khung, 50%–200%).

3. 3

   Bên phải: bật/tắt panel trái (⌘/Ctrl+B), bật/tắt Inspector (⌘/Ctrl+.), nút bàn phím mở bảng Phím tắt, nút đổi giao diện sáng/tối, Xem trước (lưu rồi mở bản xem trước ở tab mới) và Xuất bản.

4. 4

   Thanh dọc sát mép trái có 5 tab: Thêm, Cấu trúc, AI, Lịch sử, Cài đặt. Bấm lại tab đang mở để đóng panel.

5. 5

   Đáy canvas có thanh thu phóng: − / + (⌘/Ctrl − và ⌘/Ctrl +), bấm số phần trăm để về Vừa khung (⌘/Ctrl 0), và nút thước kẻ (Shift+R).

2. Thêm section và phần tử#

Bấm tab Thêm để mở bảng Thêm section & phần tử. Bảng có ô tìm kiếm (Tìm mẫu: nút bo tròn, form, hero, cta…) và các danh mục ở cột trái.

1. 1

   Khám phá: chip chủ đề nhanh (Hero, Nút bấm, Sale, Đếm ngược, Bảng giá, Form…) và các hàng mẫu nổi bật như Chữ kết hợp, Nhãn & huy hiệu, Icon 3D; bấm Xem tất cả để mở cả nhóm.

2. 2

   Hay dùng: Gần đây (mẫu bạn vừa thêm) và Đã ghim (bấm biểu tượng ngôi sao trên mẫu để Ghim vào Hay dùng).

3. 3

   Phần tử: Văn bản, Nút bấm, Ảnh, Gallery, Hình hộp, Biểu tượng, Video, Bản đồ & Fanpage, Tabs, Accordion, Bảng, Menu, Đánh giá, Đếm ngược, Mã HTML…

4. 4

   Ảnh: ảnh mẫu theo ngành, dùng miễn phí trong trang; thay ảnh khác trong Inspector.

5. 5

   Section: chọn loại section ở cột giữa (Hero, Tính năng / Lợi ích, Giới thiệu, Quy trình, Bảng giá, Đánh giá khách hàng, Câu hỏi thường gặp, Chân trang…), rồi chọn trong tab Tất cả / Mẫu thiết kế / Mẫu cơ bản.

6. 6

   Bố cục (Section · Hàng · Khối và Section ghép sẵn), Form (form mẫu và section form) và Tiện ích (popup, thanh CTA dính đáy, liên hệ nổi…).

7. 7

   Cách thêm: với section, bấm để thêm ngay dưới section đang xem, hoặc kéo thả vào canvas để chèn đúng vị trí. Với phần tử, bấm để thêm vào giữa màn hình (đè lên trang), hoặc kéo thả để đặt tự do tại điểm thả.

3. Chọn và chỉnh phần tử#

1. 1

   Bấm một phần tử trên canvas để chọn. Khung xanh có tay cầm co giãn hiện quanh phần tử, nhãn đường dẫn (ví dụ Hero › Tiêu đề …) nằm ngay trên; kéo tay cầm ⠿ cạnh nhãn để di chuyển tự do, giữ Shift khi kéo để sắp xếp vào bố cục.

2. 2

   Thanh công cụ nổi phía trên phần tử gồm: Sửa chữ (hoặc double-click; Enter để xong, Esc để huỷ), giảm/tăng cỡ chữ, Đậm, Nghiêng, Gạch chân, Màu chữ, Căn lề, Chỉnh sửa với AI Agent, Mở Inspector, Nhân bản (⌘/Ctrl+D), Xoá (Delete) và ⋯ Thao tác khác.

3. 3

   Inspector mở ở bên phải với hai tab Thiết kế và Nội dung. Đầu Inspector hiển thị tên phần tử (bấm để đổi tên) cùng các nút Nhân bản, Khóa, Ẩn trên thiết bị đang chọn và Xoá.

4. 4

   Tab Thiết kế có nhóm Hay dùng (Cỡ chữ, Độ đậm, Màu chữ, Màu nền, Bo góc, Padding đều, Căn chỉnh) và các nhóm thu gọn như Vị trí, Chữ…; gõ vào ô Tìm thuộc tính (màu, cỡ chữ, bo góc…) để tới thẳng thuộc tính cần sửa. Tab Nội dung chứa chữ, liên kết, ảnh, trường form… tuỳ loại phần tử.

5. 5

   Chỉnh theo màn hình: chọn Tablet hoặc Mobile trên thanh trên rồi chỉnh style — giá trị chỉ áp dụng cho breakpoint đó. Nút Viết lại bằng AI ở đáy Inspector viết lại nội dung chữ của phần tử.

6. 6

   Chuột phải trên phần tử (hoặc trên cây Cấu trúc) mở menu: Chỉnh sửa trong Inspector, Chỉnh sửa với AI Agent, Nhân bản, Chuyển lên, Chuyển xuống, Khoá (không chọn/sửa được trên canvas), Ẩn ở breakpoint này, Xoá.

4. Quản lý cấu trúc trang#

1. 1

   Bấm tab Cấu trúc. Chế độ Cây phân cấp liệt kê từng section và các phần tử con (Đoạn văn, Tiêu đề, Nút hành động, Hình ảnh, Icon…) kèm trích đoạn nội dung.

2. 2

   Bấm một dòng để chọn phần tử và cuộn canvas tới đó; bấm mũi tên cạnh tên section để thu gọn/mở rộng.

3. 3

   Rê chuột lên dòng section để hiện nút ↑ Lên / ↓ Xuống đổi thứ tự section. Phần tử đã khoá có biểu tượng 🔒.

4. 4

   Chế độ Section hiển thị ảnh thu nhỏ từng section, tiện nhìn tổng thể trang. Nút Chat với AI Agent ở đáy panel chuyển sang tab AI.

5. Chỉnh trang bằng AI Agent#

Tab AI mở khung chat AI Agent. Agent đọc toàn bộ trang và tự làm: sửa đúng một nút/tiêu đề/ảnh, đổi màu/font/phong cách, viết lại nội dung, thêm/bỏ/sắp xếp section, tối ưu mobile, SEO — rồi tự kiểm tra lại. Bạn xem canvas cập nhật trong lúc Agent làm việc.

1. 1

   Bấm một gợi ý trong mục Gợi ý cho trang này, hoặc gõ yêu cầu vào ô Bạn muốn chỉnh gì trên trang? rồi nhấn Enter (Shift+Enter để xuống dòng).

2. 2

   Gõ @ để nhắc tới một section cụ thể (tối đa 5 section mỗi tin); gõ / để mở Lệnh nhanh: Nhận xét trang, Tối ưu mobile, Tối ưu SEO, Đổi bảng màu, Đổi font chữ, Đổi phong cách, Viết lại nội dung, Thêm section, Làm theo website mẫu, Chuyển sang chế độ code.

3. 3

   Đính kèm ảnh bằng biểu tượng ảnh hoặc dán trực tiếp (Ctrl/⌘+V), tối đa 3 ảnh mỗi tin — ví dụ ảnh chụp lỗi hoặc mẫu tham khảo. Có thể dán link website để Agent tham khảo.

4. 4

   Trong lúc Agent đang chạy, bấm Dừng để huỷ lượt (trang giữ nguyên) hoặc gõ tiếp để xếp hàng gửi sau.

5. 5

   Sau mỗi lượt, dùng các nút dưới câu trả lời: Hoàn tác lượt AI, Xem trang TRƯỚC lượt này, Khôi phục trang về sau lượt này, hoặc Thử lại để tạo câu trả lời khác.

6. 6

   Đầu khung chat có nút đồng hồ (Lịch sử các cuộc trò chuyện), + (Cuộc trò chuyện mới) và ⋯ (Chỉ dẫn cho Agent — quy tắc cố định Agent luôn tuân theo; Công cụ nhanh như Viết lại, Rút gọn, Mở rộng, Sửa chính tả, Tạo lại section, Gợi ý SEO; Xoá cuộc trò chuyện).

6. Lịch sử chỉnh sửa và phiên bản#

1. 1

   Bấm tab Lịch sử. Mục Phiên làm việc này liệt kê các bước đã làm từ khi mở editor; bấm một bước để quay về đúng trạng thái đó (⌘Z / ⌘⇧Z để hoàn tác / làm lại từng bước).

2. 2

   Mục Phiên bản đã lưu: nhập Nhãn (tuỳ chọn), ví dụ Trước khi đổi màu, rồi bấm Lưu phiên bản. Phiên bản cũng được tạo tự động mỗi lần xuất bản (nhãn Bản xuất bản) và trước mỗi lần AI Studio sửa trang (nhãn Trước khi AI Studio sửa).

3. 3

   Với mỗi phiên bản: Xem để xem trước trên canvas (chỉ xem, bấm Đang xem để trở về bản hiện tại), Khôi phục để nạp phiên bản vào bản nháp (vẫn hoàn tác được bằng ⌘Z), hoặc Xóa phiên bản (xoá vĩnh viễn, không hoàn tác được).

7. Form, popup và tiện ích trong trang#

1. 1

   Thêm form từ danh mục Form của bảng Thêm. Chọn form, mở tab Nội dung của Inspector để sửa Nhãn nút gửi, Thông báo thành công và danh sách Các trường.

2. 2

   Mỗi trường có Nhãn, Loại trường (Họ tên, Số điện thoại, Email, Ô chữ, Đoạn văn, Số lượng, Danh sách chọn, Chọn một, Chọn màu, Ô đánh dấu, Đồng ý điều khoản), bề rộng (Cả hàng, 1/2 hàng, 1/3 hàng) và tuỳ chọn Bắt buộc. Bấm + Thêm trường hoặc ✕ để xoá trường.

3. 3

   Dữ liệu khách gửi qua form được lưu vào mục Data Leads của workspace.

4. 4

   Danh mục Tiện ích có Popup (sửa nội dung ngay trên canvas; trên trang thật popup hiện nổi giữa màn hình, đóng bằng ×, lớp phủ hoặc Esc), Thanh CTA dính đáy, Liên hệ nổi (Gọi/Zalo), Về đầu trang, Thanh cookie / thông báo, Thanh tiến trình đọc và Hiện dần khi cuộn. Tiện ích đang bật có nhãn Đang bật; bấm lại để tắt.

8. Phím tắt và lưu ý#

1. 1

   ⌘/Ctrl + Z: Hoàn tác · ⌘/Ctrl + Shift + Z: Làm lại.

2. 2

   ⌘/Ctrl + D: Nhân bản phần tử đang chọn · ↑ / ↓: Di chuyển phần tử đang chọn · Delete / Backspace: Xoá phần tử · Esc: Bỏ chọn.

3. 3

   ⌘/Ctrl + B: Thu gọn / mở panel trái · ⌘/Ctrl + .: Ẩn / hiện Inspector.

4. 4

   Trong chat AI: Enter gửi, Shift+Enter xuống dòng, ⌘/Ctrl + V dán ảnh chụp màn hình.