Flatsome là một trong những theme WordPress bán chạy nhất dành cho website bán hàng và giới thiệu dịch vụ, nhờ đi kèm trình kéo thả UX Builder mạnh mẽ giúp người dùng tự chỉnh sửa bố cục trang mà không cần biết lập trình. Bài viết này giúp bạn làm quen nhanh với các thao tác cơ bản trên UX Builder.
1. Truy cập UX Builder để chỉnh sửa trang
Có hai cách để mở UX Builder cho một trang hoặc bài viết:
- Vào trang quản trị, mở trang/bài viết cần sửa, nhấn nút Edit with UX Builder ở phía trên khung soạn thảo.
- Khi đang xem trang ở giao diện ngoài (frontend) với tài khoản quản trị đã đăng nhập, nhấn nút Edit with UX Builder hiện trên thanh công cụ WordPress phía trên cùng.
2. Hiểu cấu trúc bố cục trong UX Builder
UX Builder tổ chức nội dung theo cấu trúc phân cấp gồm:
- Row (Hàng): là khối lớn nhất, chạy full chiều ngang của trang, dùng để phân chia các phần nội dung khác nhau.
- Column (Cột): nằm bên trong Row, một Row có thể chia thành nhiều Column với tỷ lệ chiều rộng khác nhau (ví dụ 1/2 – 1/2, hoặc 1/3 – 2/3).
- Element (Phần tử): là các thành phần nội dung cụ thể nằm trong Column như văn bản, hình ảnh, nút bấm, banner, slider, form…
Thêm mới Row, Column và Element
Nhấn vào dấu cộng (+) sẽ xuất hiện tùy chọn thêm Row mới. Sau khi có Row, tiếp tục nhấn dấu cộng bên trong để chọn số lượng và tỷ lệ Column mong muốn. Cuối cùng, bên trong mỗi Column, nhấn dấu cộng để chọn loại Element muốn thêm từ thư viện có sẵn của UX Builder (Text Block, Image, Button, Video, Icon, Slider…).
3. Chỉnh sửa nội dung và thiết kế của Element
Nhấn trực tiếp vào một Element đã có sẵn để mở bảng tùy chọn chỉnh sửa, thường chia thành các tab:
- Content: chỉnh nội dung văn bản, đường dẫn liên kết, ảnh sử dụng.
- Design: chỉnh màu sắc, kiểu chữ, khoảng cách (padding/margin), căn chỉnh.
- Animation: thêm hiệu ứng xuất hiện khi cuộn trang, nếu muốn tạo điểm nhấn sinh động.
Mẹo nhỏ: sau khi chỉnh sửa xong một Element, hãy dùng chức năng xem trước (Preview) để kiểm tra trên cả giao diện máy tính và di động trước khi lưu, vì bố cục đẹp trên máy tính chưa chắc đã đẹp trên điện thoại.
4. Sao chép và di chuyển bố cục
UX Builder cho phép bạn dễ dàng nhân bản (duplicate) một Row, Column hoặc Element bằng biểu tượng sao chép, rất hữu ích khi muốn tạo nhiều khối có cấu trúc giống nhau. Bạn cũng có thể kéo thả để thay đổi thứ tự sắp xếp giữa các Row hoặc Element mà không cần xóa đi làm lại từ đầu.
Lưu và tái sử dụng bố cục (Save Element)
Nếu bạn thiết kế được một khối bố cục ưng ý và muốn dùng lại ở trang khác, hãy dùng chức năng lưu phần tử (Save as Global hoặc Save Element tùy phiên bản) thay vì làm lại từ đầu mỗi lần, giúp tiết kiệm thời gian đáng kể.
5. Một số lưu ý khi dùng UX Builder
- Không nên lồng quá nhiều Row và Column phức tạp vì có thể làm chậm tốc độ tải trang.
- Luôn nhấn nút Save/Update sau khi chỉnh sửa, tránh trường hợp thoát ra mà quên lưu làm mất công sức chỉnh sửa.
- Nên tạo bản sao (duplicate) trang trước khi thử nghiệm những thay đổi lớn để có thể khôi phục nếu chỉnh sửa không như ý.
UX Builder giúp việc tự thiết kế trang trở nên dễ dàng hơn rất nhiều, nhưng để có một bố cục vừa đẹp mắt vừa tối ưu tốc độ và trải nghiệm người dùng thì cần một chút kinh nghiệm. Nếu bạn cần hỗ trợ thiết kế lại trang bằng Flatsome UX Builder một cách chuyên nghiệp, hãy liên hệ ThinhND qua Zalo 0911947997.
