Dàn trang

2.1. Block

Block là khối để chứa các thành phần khác bên trong.

Mục đích sử dụng Block (khối):

👍Gom nhóm các thành phần với nhau và phân tách giữa các nhóm thành phần: Admin tạo Block; trong mỗi Block, admin có thể thêm các thành phần từ 6 nhóm đã đề cập. Các Block được ngăn cách bằng khoảng trống để tạo ra sự phân chia rõ ràng, giúp giao diện trở nên dễ nhìn, thẩm mỹ và dễ quản lý hơn.

👍Điều chỉnh khoảng cách của Block so với lề: Khi thêm Block, admin có thể điều chỉnh khoảng cách của các Block so với hai lề bằng cách cài đặt kích thước hiển thị.

Có hai cách trình bày khối Block

👍Đồng cấp: Các khối cùng cấp bậc với nhau. Giữa các Block đồng cấp sẽ có không gian phân cách. Muốn tạo đồng cấp thì chuột máy tính phải đang chọn mục Header hoặc Cài đặt.

👍Mẹ con: Block được phân cấp mẹ con khi đang trong 1 Block, admin tiến hành thêm 1 Block khác. Block con sẽ thụt trong một khoảng cách nhất định so với Block mẹ. Muốn tạo Block con trong Block mẹ thì chuột máy tính phải đang chọn Block mẹ.

Cài đặt thông số

• [1] Kích thước hiển thị:

  • 100%: lề Block sát với hai lề điện thoại

  • Trong lề: lề Block thụt vào trong một khoảng nhất định so với hai lề điện thoại

  • Tùy chỉnh: admin có thể tùy chỉnh khoảng cách giữa lề Block và hai lề điện thoại

• Style:

  • [2] Màu chủ đạo: Màu nền của Block

  • [3] Text trên màu chủ đạo: Màu chữ của các thành phần trong Block

  • [4] Radius: tùy chỉnh độ bo góc của Block

2.2. Đường

Tương tự như Block, đường sẽ tạo ra một đường kẻ (dòng kẻ) ở giữa hai thành phần. Đường được dùng với mục đích phân chia các thành phần thành các nhóm riêng biệt tùy theo mục đích trình bày trang. Sự sắp xếp này giúp tạo ra một bố cục rõ ràng và có tổ chức, làm nổi bật các phần quan trọng. Qua đó, chúng ta có thể dẫn dắt mắt người đọc qua từng phần của trang DynamicAction một cách hợp lý.

Cài đặt thông số

• Kích thước: độ dày của đường kẻ. Có 3 loại kích cỡ: nhỏ, vừa và lớn. Kích thước của đường ảnh hưởng sự phân tách giữa các nhóm thành phần. Kích thước của đường càng lớn thì sự phân biệt giữa các nhóm thành phần càng tăng.

• Màu sắc: cài đặt màu sắc cho đường kẻ.