UX Builder là gì? Cách sử dụng UX Builder

Có thể nói wordpress là nền tảng CMS thành công bậc nhất hiện nay, với khởi nguồn chỉ là 1 Blogging Flatsome, WordPress(wordpress.org) nay đã phát triển mạnh mẽ trong làng thiết kế web bởi sự tùy biến đa năng, đa dụng của mình. Cùng lbk tìm hiểu ngay nhé!

Ux Builder wordpress là gì?

UX Builder là một công cụ có tích hợp sẵn trong Theme Flatsome, là một bộ công cụ để tuỳ biến giao diện website chỉ bằng thao tác kéo và thả. Chỉ cần kéo thả để sắp xếp thứ tự, hiển thị của trang web mà không cần phải code một dòng code phước tạp.

Nguyên lý hoạt động của UX Builder: Giao diện trên website được quy ước hiển thị theo những đoạn code, và UX builder cho chúng ta một giao diện cho phép kéo thả dễ dàng hơn.

Những gì chúng ta kéo thả & sắp xếp sẽ được TỰ ĐỘNG chuyển hoá thành những dòng code trong giao diện.

Ux builder flatsome

Flatsome mang tới khả năng tùy biến đa dạng bởi nó hỗ trợ một page builder hoàn toàn riêng rẽ – UX Builder. Tuy vậy, không phải ai cũng có thể sử dụng dễ dàng, thành thạo page builder này. Tại Theme Options bạn sẽ cấu hình, chỉnh sửa được các phần sau:

• Header (phần đầu trang): Top bar, Main Menu, Bottom Menu, Sticky menu, logo, banner, giỏ hàng, số điện thoại, menu, …
• Footer (phần cuối trang): Các cột cuối trang, thông tin bản quyền, các khối nội dung (block)…
• Shop: chỉnh sửa các thông tin bên trong trang sản phẩm, bố cục trang danh mục sản phẩm,…
• Blog: chỉnh sửa layout, ngày giờ, và nhiều chỉnh sửa liên quan
• Style: chỉnh sửa màu sắc, font chữ, tùy biến css

Ux builder plugin wordpress

Một điểm khác biệt của UX Builder là nó không tồn tại dưới dạng plugin mà được đính kèm trong theme Flatsome. Nghĩa là bạn phải sử dụng theme Flatsome cho website thì mới dùng được UX Builder. Nhưng bạn yên tâm là Flatsome luôn lọt top các theme bán chạy nhất.

Nguyên lý hoạt động của UX Builder: Giao diện trên website được quy ước hiển thị theo những đoạn code, và UX builder cho chúng ta một giao diện cho phép kéo thả dễ dàng hơn. Những gì chúng ta kéo thả & sắp xếp sẽ được tự động chuyển hoá thành những dòng code trong giao diện.

Hướng dẫn chính sửa/cài đặt web với UX Builder

Thêm Slider trong Flatsome

Bước 1: Nhấp vào Add Elements để thêm phần tử mới

Nhìn sang cột bên trái bạn sẽ thấy các Element cần thiết cho website.

Bước 2: Nhấp chọn một Element bất kỳ

Mình sẽ nhấp vào Slider chẳng hạn

Nhấp vào Add slides here để thêm một hình ảnh làm Slide

Cột bên trái là khu vực tùy chỉnh hiển thị.

Bước 3: Sau khi ấn vào Add slides here bạn chọn dạng banner hoặc image đều được

Bước 4: Ấn vào Apply 

Theme Options

Truy cập Flatsome -> Theme Options ở bất kỳ trang nào, ngay phía trên cùng hoăc vào trang Quản trị (Admin) chọn Giao diện -> Tùy chỉnh.

Tại Theme Options bạn sẽ cấu hình, chỉnh sửa được các phần sau:

• Header (phần đầu trang): Top bar, Main Menu, Bottom Menu, Sticky menu, logo, banner, giỏ hàng, số điện thoại, menu, …
• Footer (phần cuối trang): Các cột cuối trang, thông tin bản quyền, các khối nội dung (block)…
• Shop: chỉnh sửa các thông tin bên trong trang sản phẩm, bố cục trang danh mục sản phẩm,…
• Blog: chỉnh sửa layout, ngày giờ, và nhiều chỉnh sửa liên quan
• Style: chỉnh sửa màu sắc, font chữ, tùy biến css
• …

Tùy biến màu sắc

Flatsome cho phép bạn tùy biến màu sắc như: màu chủ đạo, màu sắc chung của văn bản, đường link. Nếu trong tính năng tùy biến màu sắc của theme không cho phép thay đổi bạn phải sử dụng tính năng Custom CSS để định nghĩa màu sắc theo ý muốn (tất nhiên là bạn phải biết lập trình CSS).

Truy cập Flatsome -> Theme Options -> Style -> Color