Hướng dẫn này giúp bạn chỉnh sửa giao diện trang chủ cửa hàng trên BettaMax bằng Page Builder, không cần viết code. Bạn sẽ biết cách thêm, chỉnh sửa, sắp xếp và xóa các thành phần giao diện, rồi lưu và xem trước kết quả.
Truy cập trình chỉnh sửa giao diện #
Page Builder là công cụ kéo thả cho phép bạn tùy chỉnh toàn bộ giao diện Homepage mà không cần biết lập trình. Mọi thay đổi đều hiển thị trực tiếp trên màn hình preview trước khi bạn lưu.
- Đăng nhập vào admin.bettamax.com.
- Từ thanh menu bên trái, chọn My Store > Theme.
- Nhấn nút Customize để mở Page Builder.
Thêm thành phần mới vào trang #
Giao diện Homepage được xây dựng từ các thành phần (component) độc lập như banner, bộ sưu tập sản phẩm, testimonial, countdown. Bạn có thể thêm bất kỳ thành phần nào bằng thao tác kéo thả.
- Trong Page Builder, nhìn vào bảng menu bên trái. Chọn nhóm thành phần muốn thêm, ví dụ: Hero, Products, Text, hoặc Media.
- Kéo thành phần từ bảng menu vào vị trí mong muốn trên canvas bên phải. Một đường kẻ màu xanh sẽ xuất hiện để chỉ vị trí thành phần sẽ được thêm vào.
- Thả tay để đặt thành phần vào vị trí đó.
Chỉnh sửa nội dung của một thành phần #
Sau khi thêm thành phần, bạn cần chỉnh nội dung bên trong như text, hình ảnh, màu nền và kích thước chữ để phù hợp với cửa hàng của bạn. Mọi thay đổi hiển thị ngay trên preview mà không cần lưu trước.
- Nhấn vào thành phần muốn chỉnh sửa trên canvas. Thành phần được chọn sẽ được highlight với viền màu.
- Bảng chỉnh sửa xuất hiện ở bên trái. Thay đổi các thuộc tính cần chỉnh:
- Content – Nội dung text, tiêu đề, nút CTA.
- Image – Tải ảnh lên hoặc thay ảnh hiện tại.
- Colors – Màu nền, màu chữ, màu viền.
- Font size – Kích thước chữ cho từng phần tử.
- Spacing – Khoảng cách padding và margin.
- Xem preview trực tiếp trên canvas bên phải sau mỗi thay đổi. Không cần nhấn Apply, thay đổi cập nhật tự động.
Sắp xếp lại vị trí các thành phần #
Thứ tự các thành phần trên Homepage ảnh hưởng trực tiếp đến tỷ lệ chuyển đổi. Bạn có thể kéo để đổi vị trí bất kỳ thành phần nào mà không cần xóa và tạo lại.
- Di chuyển chuột vào thành phần cần di chuyển. Tên thành phần và biểu tượng điều khiển sẽ xuất hiện.
- Nhấn giữ biểu tượng ba gạch ngang bên cạnh tên thành phần.
- Kéo thành phần lên hoặc xuống đến vị trí mới. Đường kẻ màu xanh chỉ vị trí thành phần sẽ được đặt vào.
- Thả tay để đặt thành phần vào vị trí mới.
Xóa hoặc nhân bản thành phần #
Khi cần dọn dẹp các thành phần thừa hoặc tạo nhanh một thành phần tương tự, dùng chức năng xóa và nhân bản ngay trong Page Builder thay vì tạo lại từ đầu.
Nhấn vào thành phần cần thao tác để chọn, sau đó:
- Xóa thành phần: Nhấn biểu tượng thùng rác trên thanh điều khiển của thành phần đó.
- Nhân bản thành phần: Nhấn biểu tượng nhân bản (duplicate) trên thanh điều khiển. Bản sao sẽ xuất hiện ngay bên dưới thành phần gốc.
Chọn thành phần cha #
Trong Page Builder, một số thành phần được lồng bên trong thành phần khác (cha và con). Khi cần chỉnh sửa hoặc di chuyển nhóm thành phần cùng lúc, bạn cần chọn thành phần cha thay vì chọn từng thành phần con riêng lẻ.
- Nhấn vào thành phần con đang được chọn.
- Nhấn biểu tượng mũi tên lên bên cạnh tên thành phần trên thanh điều khiển để chuyển lên chọn thành phần cha.
Xem trước và lưu giao diện #
Luôn xem trước giao diện trên cả desktop và mobile trước khi lưu. Một giao diện đẹp trên desktop có thể hiển thị sai tỷ lệ hoặc khó đọc trên mobile nếu không kiểm tra kỹ.
- Nhấn biểu tượng mắt (👁) ở thanh trên cùng của Page Builder để mở chế độ xem trước.
- Chuyển đổi giữa chế độ xem Desktop và Mobile để kiểm tra giao diện trên cả hai nền tảng.
- Thoát chế độ xem trước và quay lại chỉnh sửa nếu cần.
- Nhấn Save để lưu toàn bộ thay đổi và áp dụng giao diện lên cửa hàng.
