Az Slider UX Pro là plugin tạo slider và showcase tương tác cho WordPress, hỗ trợ Flatsome UX Builder, Shortcode và Gutenberg với Accordion Showcase, Blog Showcase, gradient, responsive và nhiều tùy chỉnh giao diện hiện đại.

Az Slider UX Pro – Plugin Slider WordPress hiện đại cho Flatsome UX Builder

SEO Title: Az Slider UX Pro – Plugin Slider WordPress & Flatsome UX Builder
Meta Description: Az Slider UX Pro giúp tạo Accordion Slider, Blog Showcase và slider tương tác hiện đại cho WordPress, hỗ trợ Flatsome UX Builder, shortcode, Gutenberg và responsive.
Từ khóa chính: Az Slider UX Pro, plugin slider WordPress, slider Flatsome, Flatsome UX Builder slider, Blog Slider WordPress.

Az Slider UX Pro là gì?

Az Slider UX Pro là plugin WordPress được phát triển để tạo các slider và khu vực showcase nội dung theo phong cách hiện đại. Thay vì chỉ hiển thị những hình ảnh chạy ngang như slider truyền thống, plugin tập trung vào trải nghiệm tương tác với hình ảnh, tiêu đề, mô tả, badge, nút CTA, bài viết WordPress và nhiều dạng hiệu ứng khác nhau.

Điểm nổi bật của Az Slider UX Pro là khả năng tích hợp với Flatsome UX Builder, giúp người dùng Flatsome có thể kéo thả slider trực tiếp khi thiết kế trang. Tuy nhiên, plugin không phụ thuộc hoàn toàn vào Flatsome. Bạn vẫn có thể sử dụng Az Slider UX Pro trên các theme WordPress khác thông qua shortcode hoặc Gutenberg.

Plugin hướng tới hai nhóm slider chính: Accordion Showcase dành cho sản phẩm, dịch vụ, tính năng hoặc landing page và Blog Showcase dành cho bài viết, tin tức, case study hoặc nội dung nổi bật.

Accordion Showcase – Slider tương tác hiện đại

Accordion Showcase là dạng slider nổi bật nhất của Az Slider UX Pro.

Giao diện được chia thành hai khu vực. Một bên là phần nội dung gồm badge, tiêu đề, mô tả và button. Bên còn lại là các item hình ảnh dạng accordion.

Người dùng có thể lựa chọn:

Content bên trái – Item bên phải

hoặc:

Item bên trái – Content bên phải

Khi người dùng hover hoặc click vào từng item, item được chọn sẽ mở rộng và trở thành nội dung chính. Đồng thời badge, title, mô tả và button bên cạnh cũng thay đổi theo item tương ứng.

Ví dụ một item có thể bao gồm:

• Badge: “Mới: Hỗ trợ Kira 2.5 & 3.1 TTS”
• Title: “Kira AI”
• Mô tả sản phẩm hoặc dịch vụ.
• Button “Nhận 150 triệu tokens”.
• Button “Tạo key API”.
• Hình ảnh đại diện.
• Label hiển thị trên item.

Nhờ cách trình bày này, Accordion Showcase đặc biệt phù hợp với website công nghệ, SaaS, dịch vụ, agency, portfolio hoặc landing page cần tạo ấn tượng mạnh ngay từ phần đầu trang.

Blog Showcase – Trình bày bài viết nổi bật hơn

Bên cạnh Accordion Slider, Az Slider UX Pro còn hỗ trợ Blog Showcase.

Đây là dạng slider bài viết sử dụng thiết kế card theo phong cách editorial. Một card lớn nằm ở giữa đóng vai trò nội dung active, trong khi những bài viết khác được xếp hai bên với hiệu ứng xoay nhẹ, scale và chiều sâu.

Người dùng có thể chuyển bài viết bằng:

• Nút Previous và Next.
• Click vào card.
• Swipe trên điện thoại.
• Keyboard.
• Autoplay nếu được bật.

Khi click vào một card nằm bên cạnh, card đó di chuyển vào vị trí trung tâm. Khi click card đang active, người dùng có thể được chuyển đến bài viết tương ứng.

Thiết kế này giúp khu vực Blog hoặc Tin tức trở nên sinh động hơn rất nhiều so với grid bài viết thông thường.

Blog Slider lấy dữ liệu trực tiếp từ WordPress

Một ưu điểm quan trọng của Blog Showcase là khả năng lấy dữ liệu trực tiếp từ WordPress.

Plugin không yêu cầu người dùng nhập lại tiêu đề, ảnh, ngày đăng hay đường dẫn bài viết. Thay vào đó, slider có thể sử dụng dữ liệu của:

• Posts.
• Categories.
• Tags.
• Authors.
• Custom Post Types.
• Featured Image.
• Excerpt.
• Ngày đăng.
• Bình luận.
• Custom View Count.

Khi nội dung bài viết được chỉnh sửa trong WordPress, slider cũng sử dụng dữ liệu mới khi trang được render.

Điều này giúp giảm việc nhập dữ liệu trùng lặp và hạn chế tình trạng slider hiển thị thông tin cũ trong khi bài viết đã được cập nhật.

Query Builder linh hoạt cho Blog Slider

Az Slider UX Pro có thể cung cấp hệ thống Query Builder để lựa chọn bài viết theo nhu cầu.

Người quản trị có thể thiết lập:

• Loại bài viết.
• Danh mục.
• Tag.
• Tác giả.
• Số lượng bài.
• Thứ tự ASC hoặc DESC.
• Bài mới nhất.
• Bài cập nhật gần nhất.
• Sắp xếp theo tiêu đề.
• Sắp xếp theo comment.
• Loại trừ bài đang xem.
• Loại trừ bài cụ thể.
• Sticky Posts.

Ví dụ, bạn có thể tạo một slider chỉ hiển thị:

7 bài viết mới nhất thuộc danh mục AI và không hiển thị bài đang được người dùng đọc.

Ngoài chế độ tự động, plugin còn hỗ trợ Manual Posts, cho phép tìm kiếm và chọn từng bài viết sau đó kéo thả để sắp xếp thứ tự.

Chế độ này rất hữu ích khi xây dựng khu vực “Bài viết nổi bật”, “Tin được chọn”, “Case Study tiêu biểu” hoặc nội dung chiến dịch.

Thiết kế background và gradient linh hoạt

Az Slider UX Pro không giới hạn người dùng trong một kiểu nền cố định.

Plugin có thể hỗ trợ:

• Màu nền đơn.
• Gradient hai màu.
• Gradient ba màu.
• Background Image.
• Image + Overlay.
• Image + Gradient.

Gradient có thể chạy theo nhiều hướng:

• Trái sang phải.
• Phải sang trái.
• Trên xuống dưới.
• Dưới lên trên.
• Chéo trái.
• Chéo phải.
• Custom Angle từ 0 đến 360 độ.

Ngoài Linear Gradient, người dùng cũng có thể lựa chọn Radial Gradient tùy theo thiết kế.

Nhờ đó, mỗi slider có thể được điều chỉnh phù hợp với màu nhận diện thương hiệu của website.

Badge, tiêu đề và nội dung tùy chỉnh

Mỗi item trong slider có thể sở hữu bộ nội dung riêng.

Badge có thể dùng để hiển thị những thông tin như:

MỚI – HOT – FREE – MODEL – SHARECODE

Người dùng có thể tùy chỉnh:

• Màu chữ.
• Màu nền.
• Border.
• Border Radius.
• Font Size.
• Padding.
• Icon.

Tiêu đề cũng hỗ trợ nhiều cấp heading như H2, H3 hoặc H4. Plugin không bắt buộc tạo H1, giúp người quản trị dễ kiểm soát cấu trúc heading của trang.

Ngoài ra có thể tạo phần highlight riêng trong tiêu đề để làm nổi bật một từ hoặc cụm từ bằng màu sắc khác.

Hệ thống Button linh hoạt

Mỗi item có thể chứa nhiều nút CTA như:

Xem chi tiết

Đăng ký ngay

Tạo tài khoản

Nhận ưu đãi

Button có thể sử dụng style theo theme hoặc style riêng của plugin.

Các tùy chỉnh có thể bao gồm:

• Background.
• Hover Background.
• Text Color.
• Border.
• Radius.
• Shadow.
• Icon.
• Padding.

Plugin cũng có thể hỗ trợ badge nhỏ trên button như:

FREE

HOT

NEW

-30%

Điều này phù hợp cho những landing page bán hàng hoặc giới thiệu dịch vụ có CTA rõ ràng.

Tích hợp Flatsome UX Builder

Đối với website sử dụng Flatsome, Az Slider UX Pro có thể tích hợp element trực tiếp vào UX Builder.

Người dùng chỉ cần:

UX Builder → Add Element → AZ Slider UX Pro

sau đó chọn slider đã được tạo trong WordPress Admin.

Trong UX Builder có thể thiết lập nhanh một số tùy chọn như:

• Chọn slider.
• Content Left hoặc Right.
• Chiều cao.
• Khoảng cách.
• Border Radius.
• Interaction.
• Responsive.
• Extra Class.
• Element ID.

Điểm quan trọng là plugin không chỉnh sửa file của Flatsome. Vì vậy, khi cập nhật theme, cấu hình slider không bị mất do chỉnh sửa trực tiếp vào theme.

Không bắt buộc phải dùng Flatsome

Mặc dù được tối ưu cho UX Builder, Az Slider UX Pro vẫn có thể hoạt động độc lập.

Người dùng có thể chèn slider bằng shortcode:

[az_slider_ux_pro id="123"]

Hoặc sử dụng Gutenberg Block:

AZ Slider UX Pro

Nhờ đó, nếu website thay đổi theme trong tương lai, slider vẫn có thể tiếp tục hoạt động mà không cần xây dựng lại toàn bộ nội dung.

Responsive cho Desktop, Tablet và Mobile

Az Slider UX Pro được thiết kế theo hướng responsive riêng cho từng thiết bị, thay vì chỉ thu nhỏ giao diện desktop.

Người dùng có thể cấu hình riêng:

• Width.
• Height.
• Gap.
• Padding.
• Font Size.
• Item Width.
• Active Item Width.
• Button Layout.
• Content Order.

Trên mobile, Blog Showcase có thể chuyển sang dạng Center Card + Side Peek, trong đó card chính hiển thị ở giữa và hai card bên cạnh lộ ra một phần để gợi ý người dùng swipe.

Accordion Slider cũng chuyển sang interaction bằng click hoặc touch thay vì phụ thuộc hover.

Tối ưu SEO kỹ thuật

Az Slider UX Pro được định hướng xây dựng theo nguyên tắc SEO-safe.

Nội dung quan trọng như tiêu đề, mô tả, category và link bài viết được render từ phía WordPress thay vì chỉ được tạo ra bằng JavaScript.

Plugin không cần:

• Tự tạo H1.
• Thay đổi canonical.
• Thay đổi robots.
• Can thiệp SEO Title.
• Inject schema không cần thiết.
• Sử dụng link javascript:void(0).

Hình ảnh được ưu tiên sử dụng WordPress Image API với srcset, sizes, alt text và kích thước ảnh phù hợp.

Nhờ đó plugin có thể hoạt động song song với các plugin SEO phổ biến mà không cần can thiệp vào hệ thống SEO hiện tại.

Tối ưu hiệu năng

Frontend của Az Slider UX Pro được định hướng sử dụng Vanilla JavaScript thay vì phụ thuộc framework lớn.

Plugin cũng không cần tải font hoặc thư viện JavaScript từ CDN bên ngoài.

Một số nguyên tắc tối ưu gồm:

• Chỉ tải CSS và JavaScript khi trang có slider.
• Lazy load ảnh không active.
• Sử dụng responsive image của WordPress.
• Không tải ảnh full-size khi không cần thiết.
• Ưu tiên animation bằng transform và opacity.
• Không tạo DOM dư thừa.
• Hạn chế layout shift.
• Không tạo request API frontend nếu không cần.

Những yếu tố này giúp giảm ảnh hưởng của slider tới tốc độ website và Core Web Vitals.

Hỗ trợ Accessibility

Az Slider UX Pro cũng hướng tới khả năng sử dụng bằng nhiều phương thức khác nhau.

Ngoài chuột và cảm ứng, slider có thể hỗ trợ:

• Tab.
• Enter.
• Space.
• Arrow Keys.
• Focus State.
• ARIA.
• Reduced Motion.

Khi người dùng bật prefers-reduced-motion, animation có thể được giảm hoặc tắt để mang lại trải nghiệm dễ chịu hơn.

Az Slider UX Pro phù hợp với website nào?

Plugin có thể sử dụng cho nhiều loại website như:

• Website doanh nghiệp.
• Website dịch vụ.
• Website công nghệ.
• SaaS.
• AI Platform.
• Blog.
• Tin tức.
• Portfolio.
• Agency.
• Landing Page.
• Website Flatsome.
• WooCommerce.

Với Accordion Showcase, bạn có thể trình bày sản phẩm hoặc dịch vụ. Với Blog Showcase, bạn có thể xây dựng khu vực tin tức và bài viết nổi bật. Hai hệ thống slider có thể được sử dụng đồng thời trên cùng một website.

Kết luận

Az Slider UX Pro được phát triển theo hướng trở thành một plugin slider WordPress linh hoạt hơn carousel truyền thống.

Với Accordion Showcase, người dùng có thể tạo khu vực trình diễn sản phẩm, tính năng và dịch vụ theo phong cách tương tác. Với Blog Showcase, các bài viết WordPress có thể được trình bày bằng hệ thống card editorial hiện đại, nổi bật và dễ điều hướng.

Khả năng tích hợp Flatsome UX Builder, Shortcode và Gutenberg giúp plugin phù hợp với nhiều mô hình website khác nhau. Bên cạnh thiết kế, plugin còn chú trọng đến responsive, SEO kỹ thuật, accessibility và hiệu năng.

Nếu bạn đang tìm kiếm một giải pháp để tạo slider đẹp cho Flatsome hoặc WordPress, đồng thời muốn kiểm soát sâu về giao diện và nội dung, Az Slider UX Pro là một hướng triển khai đáng cân nhắc cho website hiện đại.