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ì?
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 13 Plugin UX Flat là gì?](https://sgweb.vn/wp-content/uploads/2023/09/banner-1544x500-1.jpg)
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
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 14 Tính năng của UX Flat](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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 sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 15 Hướng dẫn cài đặt Plugin UX Flat](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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”
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 16 Chọn Plugin muốn cài đặt](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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“.
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 17 Tiến hành cài đặt UX Flat](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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.
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 18 Kích hoạt Plugin UX Flat](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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).
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 19 Cài đặt UX Flat](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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):
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 20 Chọn các tính năng cần sử dụng từ UX Flat](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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“.
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 21 Lưu các tuỳ chọn đã thay đổi](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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.
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 22 Tuỳ chỉnh theo ý muốn](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
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“.
![Hướng dẫn sử dụng Plugin UX Flat đơn giản, chi tiết [2023] 23 Update các nội dung đã chỉnh sửa](https://sgweb.vn/wp-content/plugins/wp-fastest-cache-premium/pro/images/blank.gif)
Một số hình ảnh mẫu sau khi dùng Plugin 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é!
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í MinhWEBNOW - NAY CODE MAI GIAO