Giao diện Editor

Bài viết này giải thích chi tiết từng phần của Editor để bạn làm quen nhanh hơn.

Toolbar — Thanh công cụ

Toolbar nằm ở trên cùng, chứa toàn bộ điều khiển cấp cao.

Bên trái Toolbar

Chọn trang: Nhấn vào tên trang hiện tại để xem danh sách trang và chuyển đổi giữa các trang.

Trạng thái lưu:

• Đang lưu... — hệ thống đang tự động lưu thay đổi
• Đã lưu ✓ — tất cả thay đổi đã được lưu
• Lỗi lưu — có sự cố, hãy thử lại

Giữa Toolbar — Chế độ xem

Chuyển đổi giữa 3 chế độ để xem website như trên các thiết bị khác nhau:

Bạn cũng có thể nhập chiều rộng (W) và chiều cao (H) tùy ý, cũng như điều chỉnh tỷ lệ thu phóng (%) của canvas.

Bên phải Toolbar

• Undo / Redo: Hoàn tác hoặc làm lại thao tác gần nhất (phím tắt: Ctrl+Z / Ctrl+Shift+Z)
• Xem trước: Render website và tạo link xem trước tạm thời
• Xuất bản: Xuất bản/hủy xuất bản trang hiện tại
• Menu trang: Thêm trang mới, đổi tên, xóa trang

Sidebar Trái — Panel công cụ

Tab Phần tử (Elements)

Thêm thành phần mới vào trang. Có hai nhóm:

Phần tử cơ bản:

• Box (Khung chứa)
• Text (Văn bản)
• Image (Hình ảnh)
• Button (Nút bấm)
• Input (Ô nhập liệu)
• Select (Ô chọn)
• Form (Biểu mẫu)
• SVG

Pattern (Mẫu section): Các block bố cục sẵn có thể kéo vào trang ngay — Hero section, Feature section, Gallery, Testimonial, Footer...

Tab Theme

Thay đổi phong cách tổng thể của toàn bộ website:

• Màu sắc: Primary, Secondary và các màu hệ thống
• Font chữ: Chọn font cho tiêu đề và nội dung

Thay đổi Theme ảnh hưởng đến toàn bộ website, không chỉ trang đang mở.

Tab Lớp (Layer)

Hiển thị cây cấu trúc các phần tử trên trang (giống như Layers trong Figma/Photoshop). Hữu ích để:

• Chọn phần tử khó nhấn trực tiếp
• Hiểu cấu trúc lồng nhau của các box
• Kéo thả để sắp xếp lại thứ tự phần tử

Tab Site

Cài đặt cấp độ toàn site:

• CSS toàn cục
• Thông tin chung

Tab AI (Lapa)

Chatbot AI tích hợp — xem chi tiết tại Dùng AI Chatbot.

Canvas — Khu vực thiết kế

Chọn phần tử

Nhấn chuột vào bất kỳ phần tử nào trên canvas để chọn. Phần tử được chọn sẽ hiển thị viền xanh.

Kéo thả

Kéo phần tử đang chọn sang vị trí khác. Đường hướng dẫn màu xanh sẽ xuất hiện để giúp bạn căn chỉnh.

Chỉnh sửa text trực tiếp

Nhấn đúp chuột vào phần tử Text để chỉnh sửa nội dung văn bản ngay trên canvas.

Padding & Margin trực quan

Khi chọn phần tử, bạn thấy các điểm kéo xung quanh để điều chỉnh padding và margin trực tiếp bằng chuột.

Sidebar Phải — Thuộc tính phần tử

Khi chưa chọn phần tử nào: hiển thị cài đặt trang (favicon, meta...).

Khi đã chọn phần tử: hiển thị các tùy chọn theo loại phần tử:

Mẹo: Nếu sidebar bị ẩn, nhấn nút Toggle Sidebar ở góc trên phải để hiện lại.