Ux Builder là gì
Để thức hiện việc xây dựng một Trang ( Page )có nhiều thành phần và bố cục phức tạp một nhanh chóng mà không phải động vào code thì các Ux-Builder ra đời giúp quá trình xây dựng một cách nhanh chóng và dễ dàng cho người dùng, Trong Flatsome cũng hỗ trợ một Ux-builder mạnh mẻ giúp người dùng nếu ko rành về code vẩn có thể kéo thả các thành phần mình muốn vào trong giao diện của mình và có rất nhiều tùy chỉ cho mỗi thành phần trong đó.
- Dàn trang, tạo bố cục trang đơn giản và nhanh chóng
- Có sẵn thư viện các thành phần hình ảnh, video, các media…
- Chỉnh sửa các thành phần nội dung trong website chỉ với thao tác KÉO – THẢ
- Được tích hợp sẵn vào trong quản trị nội dung website
Được xây dựng từ công nghệ DRAP-DROP từ các kỹ sư thiết kế cấp cao trên thế giới nên các bạn có thể hoàn toàn yên tâm sử dụng các tiện ích của nó.
Các thành phần của Ux Builder trong flatsome
1. Các elements( thành phần bên trái )
Ở phần này flatsome đã xây dựng một bộ các thành phần ( element ) cấu trúc để giúp chúng ta hiển thị rất nhiều thứ ra giao diện người dùng một cách đơn giản là chọn add Elements hoắc trong mỗi đối tượng chứa khác thì chúng ta cũng có add to-đối tượng chứa cha để tạo ra một thành phầm hiển thị ở phần nội dung ở giữa ( số 2 ).
Trong flatsome thì ux của nó được chia thành 3 khối chính : Sơ đồ trình bày – Nội dung – shop (cài đặt woocommence)
Sơ đố trình bày :
Tạo ra những layout (bố cục) khác nhau để chúng ta có thể hiển thị phần nội dung vào trong đấy. Với sự lồng gép các đối tượng chứa này với nhau chúng ta có thể tạo ra một bố cục web site với nhiều thành phần hiển thị dữ liệu ra một cách phong phú và tạo ra phong cách độc đáo cho trang của mình.
Các thành phần chứa này có thể chứa các đối tượng chứa khác và chứa phần nội dung ở phần nội dụng và các thành phần trong Shop/
có một số thành phần chứa có giới hạn đối tượng có thể được cho vào trong đó ví như Slider chỉ chứa 3 thành phầ nội dung và 3 thành phần chứa khác. nếu bạn muốn thêm nội dung mà ko có trong danh sách thì đơn giản bạn thêm vào một đối tượng chứa khác trong danh sách như Row hoắc là section là được. Hoặc một thành phần nữa là Page header chỉ chứa nội dung tiêu đề trang, nhưng lại được gắn mặc định rồi, bạn chỉ cần tạo ra là nói sẽ tự động lấy nội dung của tiêu đề trang và hiển thị ra.
Ở trên đây mình đã tạo ra một bố cục (mình chỉ kéo các thành phần ra rồi nhé, chưa có tính thẩm mĩ ? ) Bao tất cả là một section -> Row ( mắc định trong row sẽ chứa các column nữa) có 3 column > column 1 -> slider -> imager. Bên phải sẽ là phần hiển thị nôi dung ra, như ta thấy rằng kéo nhiều thành phần ra như vậy mà chỉ hiển thị có một bức hình thôi. Ở đây bởi vì các đối tượng còn lại chỉ là cái thùng rông thôi a, nếu muốn cái thùng đấy hiểu thị cái gì thì mình phải bỏ vào phần nuội dung tương ứng để được hiển thị ra nhé.
Nội dung:
Chứa các đối tượng hiển thị nội dung, ở trong này chúng ta có rất nhiều đối tượng hiện thị nội dung ra ngoài. Bạn có thể tự kéo xuống và xem qua danh chắc. Một đối tượng nội dung bạn có thể tạo ở phía ngoài không nằng trong bất cứ đối tượng chứa nào khác hoắc nằm trong đối tượng khác để có thể dễ quản lý cũng như có sơ đồ trình bài riêng. các đôi tượng này chỉ hiển thị nội dung tương ứng của chúng ra ngoài giao diện mà không thể chứa đối tượng khác.
Shop:
Như đã nói từ bài đầu tiên Giới thiệu về Flatsome thì nó là một theme bán bàng cực tốt. nên họ đã xấy dựng một bộ công cụ để hiển thị liên quan tới phần shop bán hàng. giúp chúng ta tạo ra một trang bán hành nhanh chóng.
2.Content (Hiển thị nội dung )
Ở trong này chỉ là hiểu thị ra nội dụng bạn cài đặt bạn đã thểm vào thôi nhưng nó tương tác trực tiếp giúp chúng ta có thể thông qua nó để chỉnh sử trong các thành phần một cách nhanh chóng.
3. Cách hiển thị khi responsive (thanh bên phải)
Chúng ta có các tùy chọn chế độ xem khác nhau gồm có xem trên màn hình lớn như destop, laptop, mac-book, màn hình vừa như là tablet, ipad, màn hình nhỏ. các loại điện thoại. ở lưu ý rằng mỗi chế độ xem ở màn hình nhỏ hơn destop chúng ta có một số tùy chỉnh tiêng cho các thành phần hiển thị, bạn có thể thay đổi khác với cài đặt mặc định.
Chế độ trên màn hình lớn gồm 4 hình trên một row.
Tablet mình có thể tùy chỉnh 3 hình trên một hàng, bạn có thấy bên cột trái và phải có hiện lên Chấm xanh nhỏ không. Bình thương ( nghĩa là mặc đinh ) những chấm này là màu trắng dục chỉ khi bị thay đổi mới chuyển qua màu xanh thôi, Ví dụ cái này là mặc định nha hiển thị ở chế độ này là 100%.
Hiển thị trên di động. Lưu ý nữa bạn chỉ có thể tùy chỉnh ở những thuộc tính có chấm tròn phía sau thôi nha nhưng thuộc tính không có thì bạn thay đổi nó sẽ được áp đụng cho tất cả các chế độ xem khác nhé. Bạn lưu lai và ra ngoài giao diện để xem nó hiển thị thế nào trên các thiết bị khác nha.
Một cái bất tiện của Ux-builder flatsome là nó không có chết độ view xem từ trong khung làm việc này, bạn phải ra ngoài, tìm tơi file bạn đang làm việc rồi chọn xem trang hoặc bài biết mới được.
Mình sẽ không đi giới thiệu từng thành phần trong UX-builder của flatsome mà mình sẽ xây dựng một ví dụ về trang chủ một trang tin giới thiệu về công ty mà một trang về bán hàng ở các bài sau nhé nhé.
