1. Giới thiệu về Builder và hệ thống công cụ giúp xây dựng giao diện

You are here:
< All Topics

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 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 Paroda Web, cũng hỗ trợ một Builder mạnh mẽ giúp người dùng nếu không 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ác thành phần của Builder trong Paroda Web

Trong Paroda Web thì Builder của nó được chia thành 3 khối chính: Element (Thành phần) – Content (Nội dung) – Cách hiển thị 

1. Các Elements (Thanh bên trái)

Ở phần này Paroda Web đã xây dựng một bộ các thành phần (Elements) 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ần hiển thị ở phần nội dung ở giữa.

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 website 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 – hình ảnh trên 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 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à không 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. 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 -> Image. 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, 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 nội dung tương ứng để được hiển thị ra.

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

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 desktop chúng ta có một số tùy chỉnh riê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.

Next 2. Hướng dẫn sử dụng Builder
Table of Contents