Giới thiệu UX Builder là gì?
UX Builder là trình dựng trang (page builder) đi kèm theo theme Flatsome, cho phép bạn kéo thả (drag & drop) các phần tử để tạo bố cục, banner, slider, sản phẩm, blog… mà không cần code.
Tất cả được thực hiện trực tiếp trên giao diện trang web thật (live preview).
Cách truy cập UX Builder
Có 2 cách chính:
Từ trang Page hoặc Product
Vào Trang (Pages) → chọn trang bạn muốn chỉnh → bấm Edit with UX Builder.
Từ giao diện ngoài (frontend)
Khi đã đăng nhập, mở trang muốn sửa → trên thanh admin bar (trên cùng) chọn Edit with UX Builder
Giao diện làm việc của UX Builder
Khi mở UX Builder, màn hình chia làm 3 phần chính:
| Khu vực | Chức năng |
|---|---|
| 1. Thanh bên trái | Chứa các element (phần tử) như text, image, button, section, row, column, slider, product… |
| 2. Khu vực trung tâm | Là vùng hiển thị trực tiếp trang bạn đang chỉnh sửa. Bạn có thể click để sửa nội dung, kéo thả để sắp xếp. |
| 3. Thanh trên cùng | Có nút Save, Undo/Redo, Preview, Responsive view (xem giao diện mobile, tablet, desktop). |
Cấu trúc cơ bản trong UX Builder
Bố cục trong UX Builder thường theo dạng tầng lớp:
Section → Row → Column → Element
Mỗi phần bạn thêm đều có thể chỉnh padding, margin, màu nền, ảnh nền, hiệu ứng di chuột, animation, v.v.
Các phần tử thường dùng nhất
| Element | Chức năng |
|---|---|
| Text / Title | Chèn đoạn văn, tiêu đề (H1–H6). |
| Image | Thêm hình ảnh, có thể bo góc, thêm overlay, animation. |
| Button | Tạo nút kêu gọi hành động (CTA). |
| Icon Box | Hộp có biểu tượng + tiêu đề + mô tả. |
| Banner / Slider | Tạo khối hình có chữ đè lên, thường dùng ở trang chủ. |
| Products / Category | Hiển thị danh sách sản phẩm WooCommerce. |
| Row / Column | Chia bố cục trang (ví dụ 2 cột, 3 cột). |
| Section | Tạo khối riêng biệt với nền riêng. |
Xem trước và responsive
Nhấn biểu tượng màn hình ở thanh trên cùng để chuyển giữa:
Desktop
Tablet
Mobile
Bạn có thể chỉnh riêng từng kích thước để website hiển thị đẹp trên mọi thiết bị.
Lưu ý quan trọng
Sau khi Save, nên bấm Cập nhật (Update) trong trang WordPress để lưu hoàn chỉnh
- Nếu UX Builder không hiển thị đúng → kiểm tra cache hoặc tắt plugin xung đột (nhất là plugin tối ưu JS/CSS).
