Container

TL;DR / Tổng quan

Block Container của Nilead kết hợp vai trò của section, container và div block thành một công cụ bố cục mạnh mẽ, linh hoạt. Dù bạn đang thiết kế header, bọc nội dung hay tổ chức cấu trúc trang, block này đều đáp ứng — từ bố cục toàn chiều rộng, nội dung căn giữa, lồng nhau cho đến tùy chỉnh nâng cao, tất cả chỉ trong một nơi.

Điều kiện cần thiết

• Có quyền truy cập vào Nilead Visual Website Builder

• Quen thuộc với bảng Thêm (Add panel) và mục Bố cục (Layout section)

• Hiểu cơ bản về cấu trúc trang web (thẻ ngữ nghĩa, khối nội dung)

Hướng dẫn

Block Container là gì?

Block Container giúp bạn không cần chuyển đổi giữa section, container và div block. Hãy hình dung nó là:

• Một section: bố cục toàn chiều rộng cho banner hoặc khối nội dung

• Một container: nội dung căn giữa với khoảng đệm mặc định

• Một div block: khung đa năng cho việc tạo kiểu hoặc nhóm tùy chỉnh

Bằng cách kết hợp tất cả, bạn chỉ cần một thành phần cho hầu hết các tình huống bố cục trên website.

Cách thêm Block Container

1. Mở Add panel ở thanh bên trái

2. Đi đến Layout

3. Kéo và thả Block Container vào canvas của bạn

💡 Mặc định, block này sẽ kéo dài toàn bộ chiều rộng trình duyệt, nhưng bạn có thể điều chỉnh theo nhu cầu.

Tùy chỉnh Khối Chứa (Container Block)

Tuỳ chỉnh nó giống như bất kỳ thành phần bố cục nào khác:

• Đặt màu nền hoặc hình nền

• Thêm đổ bóng, viền hoặc bo góc

• Điều chỉnh lề và khoảng đệm (padding) để sắp xếp khoảng cách

• Lồng các Khối Chứa khác để tạo thiết kế nhiều lớp

Mọi tuỳ chọn thiết kế trong bảng Style đều hoạt động với Khối Chứa — giúp bạn kiểm soát hoàn toàn giao diện thiết kế.

Sao chép & Lồng ghép

• Nhấp chuột phải vào bất kỳ Khối Container nào và chọn Nhân bản để tái sử dụng bố cục

• Lồng ghép các Khối Container vào nhau để tạo ra các phần phức tạp (ví dụ: các cột trong banner, chân trang với các widget được nhóm lại)

Mỗi khối lồng ghép có thể có kiểu dáng, thẻ và chức năng riêng.

Khoảng cách & Căn chỉnh

Các Khối Container giúp kiểm soát luồng bố cục và khoảng cách.

• Sử dụng padding bên trong khối để tạo không gian thoáng

• Sử dụng margin bên ngoài khối để tách biệt với các thành phần xung quanh

• Hạn chế sử dụng các Khối Container rỗng chỉ để tạo khoảng cách — margin và padding sẽ hiệu quả hơn

Thay đổi Thẻ HTML

Để đảm bảo tính ngữ nghĩa hoặc khả năng truy cập, bạn có thể thay đổi thẻ của bất kỳ Khối Container nào:

• Chọn giữa div, section, header, footer, aside hoặc main

• Mở Panel Cài đặt và chọn thẻ mong muốn

Điều này đặc biệt hữu ích cho SEO, khả năng truy cập và mã nguồn sạch.

Những mẹo chuyên nghiệp

• Xem Khối Container như một công cụ bố cục đa năng

• Sử dụng cho tiêu đề, thẻ nội dung, phần, biểu mẫu — bất cứ mục nào bạn cần

• Gắn thẻ theo ngữ nghĩa để cải thiện cấu trúc trang

• Làm tổ hợp lý: lồng nhiều lớp rất mạnh mẽ nhưng nên sắp xếp rõ ràng

• Các Khối Container kế thừa hành vi và logic thiết kế từ cấu trúc bố cục cũ nên sẽ dễ làm quen

Câu hỏi thường gặp

1. Tôi có còn cần sử dụng “khối div” hoặc “phần section” không?
Không — Khối Container kết hợp cả hai và nhiều hơn thế. Đây là khối duy nhất bạn cần cho bố cục.

2. Tôi có thể dùng Khối Container cho bố cục ngữ nghĩa (ví dụ: header, footer) không?
Có. Bạn có thể thay đổi thẻ HTML của từng Khối Container để phù hợp với nhu cầu ngữ nghĩa.

3. Tôi có thể áp dụng kiểu dáng toàn cục cho Khối Container không?
Hoàn toàn có thể. Hãy sử dụng class hoặc các kiểu dáng mặc định để đảm bảo sự nhất quán.

4. Có sự khác biệt về hiệu suất khi lồng nhiều Khối Container không?
Không ảnh hưởng đáng kể trừ khi bạn tạo thứ bậc lồng quá sâu hoặc không cần thiết.

5. Tôi có thể chuyển bố cục hiện tại thành Khối Container không?
Có. Đơn giản chỉ cần thay thế các phần tử cũ bằng Khối Container và áp dụng lại kiểu dáng hoặc logic bố cục tương tự.