UX Builder và những hướng dẫn chi tiết – Sử dụng UX Builder trong Theme Flatsome năm 2022

UX Builder là gì?

Không giống với một plugin WordPress, bạn không thể cài đặt UX Builder (ux builder plugin) vì nó Là một công cụ chỉnh sửa giao diện Website được tích hợp sẵn trong Theme Flatsome,  UX Builder mang lại khả năng tùy biến giao diện website một cách mạnh mẽ chỉ bằng những thao tác kéo thả.

Chúng ta hãy cùng tìm hiểu xem UX Builder có những tính năng vượt trội nào nhé.

UX Builder
UX Builder

Những tính năng ưu việt của UX Builder

Tích hợp Woocommerce và các tính năng thương mại điện tử

Flatsome là một trong những Theme được sử dụng nhiều nhất và đáng tin cậy nhất cho tất cả các dự án thương mại điện tử tích hợp Woocommerce.

Với đầy đủ các tính năng như:

Hộp tìm kiếm: cho phép khách hàng dễ dàng tìm thấy sản phẩm mà mình mong muốn với trình đơn thả xuống

Thanh tìm kiếm - UX Builder
Thanh tìm kiếm – UX Builder

Xem nhanh sản phẩm: mở nhanh sản phẩm ngay từ danh mục mới tùy chọn xem nhanh

Xem nhanh sản phẩm trong Woocommerce
Xem nhanh sản phẩm trong Woocommerce

Tùy chọn bong bóng giảm giá: Cung cấp các tùy chọn hiển thị giảm giá cho người dùng, bạn cũng có thể chèn tùy chọn giảm giá vào trong hình ảnh sản phẩm.

Bong bóng giảm giá - Woocommerce
Bong bóng giảm giá – Woocommerce

Thêm vào giỏ hàng nhanh: Tùy chọn thêm vào giỏ hàng nhanh cung cấp cho khách hàng trải nghiệm nhanh chóng, bạn cũng có thể tùy chỉnh nút trong trang sản phẩm

Bấm vào đây >>>  Theme Flatsome là gì? Theme Wordpress cho website bán hàng tốt nhất
Thêm vào giỏ hàng
Thêm vào giỏ hàng

Sử dụng bất kỳ định dạng hình ảnh nào: Sản phẩm của bạn có thể ở bất kỳ định dạng hình ảnh nào với Theme Flatsome. Lưới sản phẩm điều chỉnh theo định dạng hình ảnh trên sản phẩm của bạn.

Danh mục sản phẩm
Danh mục sản phẩm

Thiết kế tối ưu hóa cho thiết bị di động: Việc điều hướng danh mục sản phẩm siêu nhanh chóng và dễ dàng trên màn hình di động. Điều này sẽ làm cho khách hàng của bạn hài lòng và bán hàng nhiều hơn!

Thích ứng với thiết bị di động
Thích ứng với thiết bị di động

Tùy chỉnh Header

Thành phần

Menu: Thêm danh sách thả xuống nhiều cột đẹp mắt. Bạn có thể thay đổi màu đường viền.

Menu
Menu

Biểu tượng Tìm kiếm: Thêm biểu tượng tìm kiếm vào tiêu đề. Bạn cũng có thể thêm biểu tượng tìm kiếm này vào tiêu đề di động.

Icon tìm kiếm
Icon tìm kiếm

Giỏ hàng nhỏ: Thêm một giỏ hàng nhỏ xinh xắn vào tiêu đề. Chọn giữa nhiều biểu tượng khác nhau hoặc tải lên của riêng bạn. Bạn cũng có thể có một giỏ hàng ‘Off canvas’.

Giỏ hàng nhỏ
Giỏ hàng nhỏ

Bản tin: Thêm một hộp đăng ký bản tin đẹp vào tiêu đề. Bạn có thể tích hợp điều này vào hầu hết các biểu mẫu hoặc plugin biểu mẫu đăng ký.

Bảng tin
Bảng tin

Một số mẫu Header được chỉnh sửa bằng UX Builder trên thiết bị di động

Các mẫu Header trên định dạng máy tính, laptop của Theme Flatsome

Tùy chỉnh Footer

  • Căn chỉnh chân trang: Chọn cách bạn muốn căn chỉnh chân trang tuyệt đối
  • Chân trang tối hoặc sáng: Chọn để có chân trang tối hoặc sáng
  • Thay đổi màu nền: Thay đổi nền chân trang thành bất kỳ màu nào. Bạn cũng có thể thêm hình nền.
  • Tiện ích bài viết trên blog: Thêm tiện ích bài đăng blog đẹp vào tiện ích chân trang
  • Thay thế chân trang: Thay thế chân trang bằng một Khối có thể được chỉnh sửa bằng Trình tạo trang.
Bấm vào đây >>>  THẺ TAG TRONG WEBSITE LÀ GÌ? CÁCH SỬ DỤNG TAG HIỆU QUẢ

Một số mẫu footer đẹp của Theme Flatsome được UX Builder chỉnh sửa

Sáng tạo với Flatsome studio có trong UX Builder

Flatsome studio có trong UX Builder là một thư viện sáng tạo trực tuyến  lớn với các mẫu template được các nhà sáng tạo chia sẻ miễn phí hoặc có phí, bạn có thể dễ dàng tải về và cài đặt vào website của bạn

UX Builder và những hướng dẫn chi tiết - Sử dụng UX Builder trong Theme Flatsome năm 2022 10
Flatsome Studio

Tăng tốc hiệu suất của Website sử dụng Theme Flatsome

Theme Flatsome và trình chỉnh sửa UX Builder cung cấp cho website bạn một hiệu suất siêu cao với các yếu tố:

Chủ đề đa mục đích nhanh nhất trên Themeforest: Mọi yếu tố trong Flatsome đều được tối ưu hóa để có tốc độ trang tốt hơn. 

Khung CSS và Javascript nhẹ: Cố gắng tạo CSS để có kích thước tệp nhỏ nhất. Điều này tốt cho tốc độ trang và SEO.

Tải thông minh Lazy Loading: Flatsome sử dụng Smart Lazy Loading trên tất cả các hình nền và hình ảnh, vì vậy hình ảnh chỉ được tải khi cần thiết. Điều đó làm cho trang web tải nhanh đáng kinh ngạc.

Hiệu ứng thị sai & hoạt ảnh hiệu quả cao: Giữ các hoạt ảnh CSS và hiệu ứng thị sai ở mức tối thiểu 60 khung hình / giây. Điều đó làm cho trang web cảm thấy thực sự trơn tru.

Các bài kiểm tra tốc độ đã được thực hiện như thế nào: Chúng tôi đã thử nghiệm Flatsome trên trang này (Classic Shop). Chúng tôi đã sử dụng plugin WP Rocket cho Bộ nhớ đệm. Trang web được lưu trữ trên WP Engine. Lazy Loading trong Advanced> Optimize

Trên đây là tổng quan về các tính năng tính và UX Builder có thể làm được khi kết hợp cùng Theme Flatsome. Sau đây sẽ là những hướng dẫn nếu bạn muốn tự chỉnh sửa với UX Builder để cá nhân hóa trang web của mình.

Bấm vào đây >>>  Cách gỡ bỏ report DMCA gỡ kháng cáo DMCA bị đối thủ SEOER chơi bẩn

Thư viện đa dạng các Elements

Section Element

Được sử dụng để tạo hình nền có chiều rộng đầy đủ với nội dung bên trong nó

Ví dụ: Tạo một section đơn giản với 1 hàng 2 cột, một section tối với 1 hàng bên trong, một section với bên trong nền là video, một section có thể chứa hình ảnh hoặc màu,…

UX Builder và những hướng dẫn chi tiết - Sử dụng UX Builder trong Theme Flatsome năm 2022 11
Section Element

Row and Column

Tạo ra các bố cục tuyệt vời bằng cách tạo ra các bố cục cột và hàng bằng Flexbox

Chia hàng và cột
Chia hàng và cột

Banner là hệ thống chủ đạo của Flatsome. Hệ thống Banner của UX Builder cho phép bạn tạo các biểu ngữ đáp ứng đẹp mắt bằng cách kéo và thả.

Banner
Banner

Galleries

Tạo Thư viện bằng cách sử dụng ID hình ảnh và kéo và thả. Bạn có thể dễ dàng tạo phòng trưng bày từ Trình tạo trang.

Danh mục sản phẩm
Danh mục sản phẩm

Product Galleries

Tạo tổng quan đẹp về các danh mục Shop của bạn. Có hầu như không giới hạn các biến thể, nhưng đây là một số ví dụ.

Danh mục sản phẩm
Danh mục sản phẩm

TESTEMONIAL ELEMENT

Hiển thị những đánh giá tích cực của các khách hàng trước đây, hiển thị những chia sẻ và trải nghiệm của họ sau khi sử dụng sản phẩm của bạn. Điều này làm tăng tính trải nghiệm và lòng tin đối với những khách hàng mới đến với website.

Đánh giá của khách hàng
Đánh giá của khách hàng

__________________________________________________________________________________________________________

Trên đây là những tính năng hữu ích của trình chỉnh sửa trang web UX Builder được tích hợp trong theme Flatsome, bạn có thể tham khảo thêm các chủ đề khác xoay quanh thiết kế website WordPress tại video của Tùng Phát Official. Hoặc tham khảo thêm chuyên mục bài viết về Theme Flatsome.

4/5 - (4 bình chọn)

Originally posted 2022-06-28 12:03:22.

Nguyễn Tuấn Tài

Tôi là Nguyễn Tuấn Tài, nhân viên của công ty Tùng Phát, đồng hành cùng các bạn trong các chuyên mục bài viết về Thiết kế và quản trị website, hy vọng những nội dung trên sẽ hữu ích cho các bạn.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *