Trình dựng giao diện
Hệ thống cung cấp một Trình dựng trang trực quan (Page Builder) giúp bạn tự do quản lý cấu trúc, thêm bớt, kéo thả thay đổi thứ tự và tùy chỉnh chi tiết nội dung các khối (block) hiển thị trên trang chủ Storefront. Bạn có thể dễ dàng theo dõi trực tiếp các thay đổi qua khung xem trước trước khi quyết định xuất bản chính thức.
1. Giao Diện Page Builder & Khung Xem Trước Trực Tiếp (Live Preview)
Bạn truy cập trang quản trị Admin Panel, chọn mục Quản Lý Giao Diện (hoặc truy cập trực tiếp đường dẫn: /admin/appearance). Màn hình làm việc được chia làm 2 khu vực chính:
- Khung quản lý block (Bên trái): Hiển thị danh sách các khối nội dung hiện tại trên trang chủ. Tại đây bạn có thể kéo thả sắp xếp, bật/tắt hiển thị, chỉnh sửa chi tiết, nhân bản hoặc xóa bỏ block.
- Khung xem trước trực tiếp (Bên phải): Mô phỏng hiển thị thực tế của trang chủ dựa trên các thiết lập hiện tại. Bạn có thể chọn giữa chế độ Máy tính (Monitor) hoặc Điện thoại (Smartphone) và nút Tải lại để cập nhật nhanh bản nháp hiển thị.
Hình 1: Giao diện tổng quan Page Builder với danh sách block và khung xem trước đa thiết bị
2. Thao Tác Quản Lý Cấu Trúc Khối Nội Dung (Blocks)
Các khối nội dung được quản lý cực kỳ linh hoạt với các thao tác kéo thả và phím tắt nhanh:
- Kéo thả thay đổi thứ tự: Di chuột vào biểu tượng 6 dấu chấm dọc (Grip) của block cần di chuyển, nhấn giữ chuột trái và kéo lên hoặc xuống vị trí mong muốn. Khung xem trước bên phải sẽ tự động tải lại để cập nhật thứ tự mới.
- Thêm khối nội dung mới: Chọn nút + Thêm block ở đầu trang hoặc dưới chân danh sách để mở bảng chọn. Bạn có thể lựa chọn thêm nhiều khối đa dạng như: Gallery (Ảnh + Văn bản), FAQ (Câu hỏi thường gặp), Testimonials (Đánh giá thành viên), CTA (Kêu gọi hành động), HTML tùy chỉnh, Stats (Thống kê hệ thống)...
- Bật/Tắt hiển thị nhanh: Chọn nút gạt (Switch) màu cam bên cạnh tên block để ẩn hoặc hiện nhanh khối đó trên trang chủ ngay lập tức.
- Nhân bản (Duplicate): Chọn biểu tượng sao chép (Copy) trên các block cho phép (mục không bị giới hạn) để tạo nhanh một khối tương tự và chỉnh sửa nội dung.
- Xóa khối (Delete): Chọn biểu tượng thùng rác để gỡ bỏ khối khỏi danh sách. Khối bị xóa sẽ chỉ chính thức biến mất khỏi trang chủ sau khi bạn bấm xuất bản.
3. Chỉnh Sửa Chi Tiết Nội Dung & Tích Hợp Trí Tuệ Nhân Tạo AI
Bạn chọn trực tiếp tên khối hoặc chọn biểu tượng bút chì để mở Panel Chỉnh Sửa trượt ra từ bên phải màn hình:
Hình 2: Bảng trượt chỉnh sửa chi tiết thuộc tính của khối nội dung
Các tính năng hỗ trợ nâng cao trong bảng chỉnh sửa:
- Quản lý hình ảnh nhanh từ elFinder: Tại các trường yêu cầu nhập đường dẫn hình ảnh/video, bạn nhấp biểu tượng thư mục mở ra popup quản lý file tập trung elFinder. Bạn có thể dễ dàng upload ảnh mới hoặc chọn lại các ảnh đã có sẵn mà không cần sao chép link thủ công.
- Tự động tạo nội dung bằng AI: Đối với khối *HTML / Văn bản tùy chỉnh*, hệ thống tích hợp sẵn nút Tạo nội dung bằng AI. Bạn chỉ cần nhập mô tả yêu cầu bằng tiếng Việt (Ví dụ: "Tạo dải banner kêu gọi đăng ký nhận hoa hồng có nền cam gradient nổi bật kèm 2 nút bấm"), AI sẽ tự động sinh mã HTML đẹp mắt, chuẩn responsive cho bạn.
- Cấu hình dữ liệu ảo thông minh: Ở các khối có hiển thị số liệu như *Hero (Đầu trang)* dạng split hoặc *Thống kê hệ thống*, bạn có thể nhập thêm các giá trị số ảo (lượt chọn, số thành viên, số tiền đã chi) để cộng dồn vào số liệu thực tế, giúp tăng uy tín thương hiệu ngoài trang chủ.
Mỗi khi bạn thay đổi nội dung trong panel chỉnh sửa hoặc kéo thả đổi vị trí, hệ thống sẽ tự động lưu một bản nháp tạm vào phiên làm việc và làm mới khung xem trước bên phải. Sau khi hoàn toàn ưng ý với giao diện mới, bạn hãy bấm nút `Xuất bản` (Publish) ở góc trên bên phải màn hình để hệ thống chính thức áp dụng thay đổi và hiển thị rộng rãi ra Storefront cho toàn bộ khách hàng.