Cách sử dụng UX builder wordpress

Tue, Jun 29, 2021

Đọc trong 7 phút

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).

Cách sử dụng UX builder wordpress

Mời Nam 1 ly cafe...

Hoặc click quảng cáo ủng hộ Nam nhé ^^!

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.

ux buider là gì

Flatsome với cốt lõi là page builder “UX Builder” vô cùng mạnh mẽ

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

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

Phần giao diện, tinh chỉnh của Ux builder

Theme Option mang tới nhiều lựa chọn tinh chỉnh cho Flatsome – Hãy thử ấn vào Header Main nằm trong Header xem bạn sẽ tới màn hình gì

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 của Ux builder wordpress có thể tinh chỉnh dễ dàng

Header mang tới cho bạn nhiều sự tinh chỉnh, trong đó 3 cấp Menu lần lượt được sắp xếp từ trên xuống dưới (Top bar -> Header Main -> Header Bottom)

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

Tinh chỉnh màu sắc của Ux builder chuẩn Ux

Màu sắc chủ đạo, gồm 4 màu chính Primary, Secondary, Success & Alert

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

Ux builder - tinh chỉnh Typography

Headline Font, base font & Navigation

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

Xây dựng Footer Ux builder Wordpress

Footer mang tới cho bạn một số tinh chỉnh, chọn Block Footer, Navigation Menu

Cách sử dụng các đối tượng bố cục Rows - Columns

Nếu bạn tìm hiểu về các tài liệu của Google Material.io liên quan tới Layout Grid Responsive (Giao diện dạng lưới co dãn theo nhiều kích thước màn hình) thì sẽ hiểu được sức mạnh của Flatsome Ux Builder tốt như thế nào. Dưới đây Nam sẽ đưa ra ví dụ sau:

Đây là dàn trang mẫu của màn hình điện thoại Android, bạn sẽ thấy có 8 ô màu hồng cách đều nhau những khoảng màu xanh nước biển & cách lề khoảng xanh lá cây. Những mảng màu sắc này có ý nghĩa như sau: 

  1. Columns: Là những cột, sắp xếp để chia tách khối bố cục theo tỉ lệ mong muốn
  2. Gutters: Là khoảng cách của những cột này
  3. Margins: Margin là khoảng cách căn lề 

Nếu bạn tinh ý thì khái niệm Ux Builder của Flatsome cũng cover tất cả những điều trên, đồng thời bổ sung thêm một số khái niệm mới như:

Hãy cùng xem tinh chỉnh của đối tượng bố cục Row xem có điểm gì “hay ho” nhé

Như vậy phần Column Spacing sẽ quyết định khoảng cách giữa các cột hay còn gọi là Gutters

Tương tự như vậy, phần Width cũng quyết định bề ngang của cả một khối Rows, tạo ra khoảng cách (Margins) tương ứng với lề

Như vậy, muốn dàn trang đẹp, ta cũng cần tham khảo hướng dẫn UI / UX từ đó dàn Flatsome theo bố cục mong muốn trước khi xây đắp những nội dung bên trong. Nam luôn recommend các bạn sử dụng tổ hợp bố cục như trên 

Khi tôi ấn vào chế độ xem giao diện Mobile (Responsive)

Lúc này, 2 đối tượng Column đều chiếm 12 phần, tức là chúng đã sắp xếp theo bề dọc, thay vì bề ngang như ở phiên bản Desktop

Ở bản Desktop, 2 cột chiếm 6 phần, tổng là 12 bằng đúng 1 hàng

Pro tips: Hãy hạn chế sử dụng Rows trong Rows, bởi chúng sẽ làm website trở nên rối rắm, khó quản lý. Nếu Layout quá khó & bạn buộc phải dùng, hãy sử dụng Label để đánh dấu phần các nội dung với nhau. Một số Block của Ux Builder rất hữu hiệu trong việc chia bố cục như Image Box, Icon Box (Với tinh chỉnh Vertical)

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

How to use the UX Builder

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

Tham khảo Video hướng dẫn chính thức từ Ux Team

Hướng dẫn của Ux team là tương đối tốt để bạn có thể làm quen với Ux builder Wordpress