Cách sử dụng UX builder wordpress

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 thành một con khủng long đích thực trong làng thiết kế web bởi sự tùy biến đa năng, đa dụng của mình. Bên cạnh đó, với mã nguồn mở cùng sự đóng góp của hàng trăm nghìn developers, WordPress cũng mang tới vô vàn những tính năng & trải nghiệm thú vị nằm ở cả Themes(giao diện) và Plugins(bản mở rộng).

Nổi bật trong số đó phải kể đến themes Flatsome – Đây là theme thương mại điện tử vô cùng nổi tiếng đến từ UX themes. 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, thấu hiểu điều đó, Nam Digital sẽ giúp bạn giải quyết vấn đề vô cùng đơn giản

Ux builder là gì?

Trên trang chủ của UX themes, UX builder được định nghĩa như một

Revolutionary Responsive Front-end Page Builder

Ux themes

Ux Builder là công cụ tuyệt hảo giúp bạn xây dựng một Website chuẩn Responsive (Thân thiện Mobile) và không cần phải Coding gì hết. Một số thành phần chính mà Ux builder có thể đáp ứng dễ dàng là Sliders, Banners, các trang thân thiện di động vô cùng tiện lợi.

Một số ưu điểm vượt trội của Flatsome

• Front-end Page Builder: Thay đổi phần nội dung với chức nưang drag & drop, tạo và thay đổi layout bằng layout element, edit text sử dụng text editor. Tất cả phần nội dung được dựng và edited bằng Ux builder
• Responsive Options: Ux builder thân thiện với mọi thiết bị & sẽ giúp bạn tinh chỉnh bất kỳ thành phần gì đơn giản.
• Tốc độ nhanh chóng: Ux builder xây dựng bằng Angular, chính vì vậy nó rất nhanh chóng & gọn nhẹ

Cách sử dụng Ux builder – Themes Flatsome

Flatsome mang tới nhiều tinh chỉnh, giúp bạn thay đổi được rất nhiều thành phần của website, trong đó quan trọng nhất là khối Theme Options

Cách sử dụng Theme Options

Về cách tùy biến Theme option, bạn có thể tham khảo tại bài viết sau

Một số phần đáng chú ý trong Theme Options

Header

Header là thành phần đầu trang của bất kỳ website nào, chính vì vậy chúng chắc chắn là sẽ là phần bạn mong muốn có nhiều tinh chỉnh nhất, Flatsome hỗ trợ cho bạn tới 3 loại Menu khác nhau để bài trí “thả ga”

• Header main
• Top Bar
• Header Bottom
• Header Mobile (Một header riêng dành cho Mobile nhé)

Cách tinh chỉnh layout

Layout mang tới cho bạn tinh chỉnh về tổng chiều dài Content width: Đây là độ dài tối đa mà một Container (chứa chữ & các nội dung) có thể đạt tới. Container thường có chiều dài ít hơn chiều dài của màn hình để có khoảng trống 2 bên. Ngoài ra, bạn cũng có thể tinh chỉnh được giao diện web là sử dụng Light hay Dark Mode.

Style

Một số phần quan trọng thì bài viết giới thiệu ở trên đã Cover hết, do đó Nam chỉ giới thiệu về các thành phần Nam cảm thấy quan trọng nhất mà thôi, và điều đó phần lớn sẽ mang lại cái lõi của một Website.

Một giao diện website đẹp sẽ có sự đồng bộ & bất biến ở nhiều thành phần, trong đó Style, Content Width, header, Footer thường sẽ phải tuân theo quy tắc này.

Style mang tới một số tinh chỉnh

Với định hướng chuẩn UI / UX, Flatsome chỉ mang tới từng đó màu sắc chủ đạo mà thôi. Bạn có thể sử dụng công cụ này để tạo ra các nhóm màu liên quan từ một màu sắc chủ đạo

Typography

Typography mang tới nhiều lựa chọn về Font, Base Text Font, Navigation, Alt Fonts

Footer

Video cách sử dụng Ux Builder – Flatsome từ UX Themes

Một số lỗi Ux Builder phổ biến và cách khắc phục

Cùng tìm hiểu một số lỗi Ux builder & cách khắc phục.

Lỗi loading UX Builder

Nguyên nhân	Cách khắc phục
Xung đột Plugin, Code hoặc Update bản WordPress mới	Disable toàn bộ Plugins xem lỗi còn phát sinh không, nếu không hãy từ từ bật các Plugin để xác định Plugins nào lỗi
Lỗi do host, vps	Xem tại đây để biết chính xác requirement của Flatsome là gì? sau đó thiết lập Server xoay quanh những thông số đó.
Giải quyết lỗi triệt để hơn	Update Flatsome lên bản mới, mình khuyến khích bạn nên mua License để được sử dụng những tính năng mới nhất của Themes

Mẹo sử dụng Flatsome & một số dòng code hữu ích

Dưới đây là một số nguồn & ví dụ vô cùng hữu ích dành cho việc Custom Flatsome. Tất nhiên, để bắt đầu làm quen và hiểu về cách tối ưu chức năng cho Flatsome, bạn cần hiểu khái niệm về Hook(Điểm neo) và những điểm neo có sẵn trong theme Flatsome. Chi tiết về khái niệm và cách sử dụng cơ bản bạn có thể tham khảo tại đây

Một số Hook cơ bản của theme Flatsome

Trang của bạn pttuan rất hữu ích cho việc chèn các chức năng mới vào các điểm Hook của Flatsome

Một số hook cơ bản của Flatsome by hocwordpress.vn