Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023]

Plugin UX Flat là một phần mềm được tích hợp vào công cụ WordPress mang lại cho quản trị viên những tính năng vượt trội hơn phiên bản WordPress không có UX Flat. Vậy bạn đã biết các sử dụng chúng hay chưa? Nếu bạn chưa biết cách sử dụng công cụ này, WebNow sẽ hướng dẫn sử dụng Plugin UX Flat cho trang web của bạn qua bài viết dưới đây. Hãy cùng tìm hiểu nhé!

Plugin UX Flat là gì?

Plugin UX Flat là gì?
Plugin UX Flat là gì?

UX Flat là một plugin được phát triển bởi Tien Cop WPVNTeam để hỗ trợ và mở rộng giao diện người dùng dành riêng cho Theme Flatsome. Với plugin này, bạn có thể dễ dàng tùy chỉnh cũng như tạo ra các thiết kế giao diện phẳng (Flat Design) hiện đại, chuyên nghiệp dành cho website của doanh nghiệp mình.

Công cụ này cung cấp một loạt các tính năng cùng các tùy chọn nâng cao để bạn có thể tuỳ chỉnh giao diện theo ý muốn. Việc tùy chỉnh có thể được thực hiện chỉ với vài thao tác click chuột để tạo ra một trang web với giao diện mới mẻ và thu hút nhiều khách hàng truy cập.

Đặc biệt, Plugin UX Flat được xây dựng để tương thích hoàn hảo với Theme Flatsome – một trong những theme WordPress phổ biến nhất hiện nay cho các trang web thương mại điện tử.

Tính năng của UX Flat

Tính năng của UX Flat
Tính năng của UX Flat

Plugin UX Flat mang lại nhiều lợi ích cho website như giúp tăng cường khả năng tùy chỉnh giao diện trang web bằng cách thêm nhiều hiệu ứng và Element mới vào UX Builder. Các tính năng chính của chúng bao gồm:

  • Loader Type: cho phép bạn tùy biến nút load trang với nhiều kiểu dáng khác nhau.
  • Typing Animation: giúp người dùng dễ dàng thêm hiệu ứng cho chữ, tạo sự hấp dẫn và sinh động cho nội dung.
  • Fl Icons: bạn có thể thay thế lại các icon mặc định của theme bằng các icon mới và đẹp hơn.
  • Banners: được tích hợp thêm element UXF Banner vào UX Builder, giúp bạn tạo ra các banner quảng cáo cũng như các thông báo nổi bật.
  • Section: cho phép bạn thêm element UXF Section vào UX Builder nhằm tạo ra các section có nền động, hiệu ứng parallax hoặc video background.
  • Image: giúp bạn tạo ra các hình ảnh có hiệu ứng hover, zoom, rotate hoặc filter vì cho phép người dùng thêm element UXF Image vào UX Builder.
  • Back to top: người dùng có thể tùy chỉnh lại nút back to top, thay đổi màu sắc, kích thước, vị trí hoặc icon.

Hướng dẫn cài đặt Plugin UX Flat

Cài đặt công cụ này vào WordPress rất dễ dàng, bạn chỉ cần làm theo thứ tự 4 bước sau đây:

Bước 1: Cài mới

Chọn “Plugin” -> “Cài mới

Hướng dẫn cài đặt Plugin UX Flat
Hướng dẫn cài đặt Plugin UX Flat

Bước 2: Chọn Plugin muốn cài đặt

Nhấn vào ô tìm kiếm và nhập công cụ bạn muốn cài đặt, ở đây là “UX Flat

Chọn Plugin muốn cài đặt
Chọn Plugin muốn cài đặt

Bước 3: Tiến hành cài đặt

Tìm đúng biểu tượng UX Flat và nhấn vào “Cài đặt“.

Tiến hành cài đặt UX Flat
Tiến hành cài đặt UX Flat

Bước 4: Kích hoạt

Sau khi đã cài đặt Plugin, bạn cần “Kích hoạt” trước khi bắt đầu sử dụng chúng.

Kích hoạt Plugin UX Flat
Kích hoạt Plugin UX Flat

Hướng dẫn sử dụng Plugin UX Flat

WebNow sẽ gợi ý cho bạn cách sử dụng Plugin UX Flat thông qua 5 bước đơn giản bao gồm:

Bước 1: Cài đặt vào Plugin

Sau khi kích hoạt, chọn “Plugin” -> “Cài đặt” (bên dưới UX Flat).

Cài đặt UX Flat
Cài đặt Plugin UX Flat trên WordPress

Bước 2: Chọn tính năng sử dụng

Chọn các tính năng mà bạn cần sử dụng cho trang web của mình bao gồm:

Replace Elements (Thay thế các yếu tố)

  • Section (các phần): bổ sung thêm chức năng lặp lại hình ảnh nếu hình ảnh nhỏ, màu gradient (màu chuyển sắc) từ 4 hướng, thêm hiệu ứng background, hiệu ứng hover background,…
  • Banner (biển quảng cáo): tương tự Section nhưng có thêm nhiều hiệu ứng hover background.
  • Title (tiêu đề): có thêm tuỳ biến viền và nền tiêu đề theo ý.
  • Divider (các đường kẻ): có thêm nhiều tuỳ biến theo ý thích.
  • Button (nút bấm): thiết lập độ dày, mỏng của chữ, khoảng cách các chữ và các hiệu ứng.
  • Gallery (trưng bày): thêm khả năng tuỳ biến tiêu đề, ảnh của gallery.
  • Slider (thanh trượt): thêm khả năng bo góc, khoảng cách giữ các phần tử.
  • Image (hình ảnh): có thể thêm URL, chú thích và hiệu ứng của hình ảnh.
  • Blog Posts (nội dung đăng tải): thêm các tuỳ biến riêng cho bài viết như: tiêu đề, tác giả, hình ảnh,…
  • Portfolio (dự án):

New Elements (Yếu tố mới)

  • Blog Categories (danh mục blog): khả năng tuỳ biến danh mục bài viết tương tự danh mục sản phẩm và có thể thêm hình đại diện vào.
  • More (nhiều hơn): có thể dùng kèm mô tả danh mục, chuyên mục hoặc bài viết.
  • Icon (biểu tượng): hỗ trợ thêm và tuỳ biến icon mặc định của Flatsome.
  • FAQ Schema (những câu hỏi thường gặp): tính năng câu hỏi thường gặp theo chuẩn Schema dạng hỏi đáp.
  • Lightbox (biển quảng cáo dạng hộp): đã được tích hợp từ tính năng ẩn của Flatsome thành elements để dễ dàng sử dụng.
  • Table (bảng): khả năng tuỳ biến bảng HTML theo sở thích dễ dàng hơn.
  • IFrame (khung nội tuyến, thẻ tag của một HTML): giúp bạn nhúng Google Map vào trang web nhanh chóng hơn mà không cần dùng API.
  • Module (mô-đun):
  • Progress Bar & Skill Bar (thanh tiến trình và thanh kĩ năng): tuỳ biến thanh tiến trình và thanh kĩ năng theo ý thích.

Performance (Hiệu suất)

  • Disable Flatsome issues (tắt thông báo vấn đề của Flatsome): tắt thông báo của Flatsome khi không có key.
  • Enable CDN jsDelivr (hover, animate, nprocess) (kích hoạt CDN):
  • Enable Turbolinks (kích hoạt Turbolinks):

Apperance (Xuất hiện)

  • Lightbox Close Inside (dời nút tắt sát lại gần cái popup hơn):
  • Adding the Title Attribute to image Tags (thêm thuộc tính tiêu đề vào hình ảnh):
Chọn các tính năng cần sử dụng từ UX Flat
Chọn các tính năng cần sử dụng từ UX Flat

Bước 3: Lưu các thay đổi

Sau khi đã chọn các tính năng cần sử dụng, bạn cần lưu các tuỳ chọn bằng cách nhấn vào “Save All Changes“.

Lưu các tuỳ chọn đã thay đổi
Lưu các tuỳ chọn đã thay đổi

Bước 4: Tuỳ chỉnh theo ý muốn

Tại giao diện Ux Builder bắt đầu sử dụng các tính năng UX Flat Design đã chọn ở bước 3.

Tuỳ chỉnh theo ý muốn
Giao diện tuỳ chỉnh của UX Flat trên WordPress

Bước 5: Cập nhật

Cập nhật và lưu lại các nội dung đã chỉnh sửa bằng cách nhấn vào nút “Update“.

Update các nội dung đã chỉnh sửa
Update các nội dung đã chỉnh sửa

Một số hình ảnh mẫu sau khi dùng Plugin UX Flat

Một số hình ảnh demo sau khi dùng UX Flat

Kết luận

Qua bài viết này, WebNow đã hướng dẫn cho bạn cách cài đặt cùng với cách sử dụng Plugin UX Flat vô cùng đơn giản và chi tiết. Chúng tôi mong rằng bạn đã nắm rõ các thông tin về công cụ này để áp dụng vào website của doanh nghiệp mình.

WebNow tự hào là đơn vị chuyên thiết kế website nhanh chóng, với mức giá ưu đãi nhất trên thị trường. Nếu bạn muốn tích hợp Plugin UX Flat vào WordPress nhanh chóng, hãy liên lạc với WebNow để được tư vấn các dịch vụ vô cùng xịn xò nhé!

Đặc biệt, chúng tôi có đội ngũ kỹ thuật viên giàu kinh nghiệm trong lĩnh vực thiết kế và vận hành website. WebNow còn là nơi phát triển trang web với mức giá hợp lí, giao diện theo sở thích của khách hàng với:

  • Đầy đủ các tính năng, thân thiện với người sử dụng.
  • Cung cấp chứng chỉ bảo mật an toàn SSL và HTTPS.
  • Giao diện hiện đại, đẹp mắt, chuẩn SEO.
  • Tính năng quản lý sản phẩm thông minh.
  • Dễ dàng quản lý, sử dụng Website.

Bên cạnh đó, công ty chúng tôi còn có đội ngũ nhân viên chăm sóc khách hàng 24/7 để hỗ trợ và giải đáp những thắc mắc của quý khách kèm theo các chương trình ưu đãi cực kì hấp dẫn.

Hãy liên hệ với chúng tôi sớm nhất để tìm ra một Plugin tối ưu cho doanh nghiệp của bạn nhé!

WEBNOW - NAY CODE MAI GIAO

Hotline: 02862.722.577

Email: hi@webnow.vn

Địa chỉ: 123/18A Nguyễn Xí, Phường 26, Quận Bình Thạnh, TP. Hồ Chí Minh

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 *