Chào anh/chị,

Ở bài hướng dẫn trước, chúng ta đã tìm hiểu về Section (Mục), được ví như những “căn phòng” trên trang web. Hôm nay, chúng ta sẽ học cách sắp xếp “đồ đạc” bên trong những căn phòng đó một cách ngăn nắp và đẹp mắt bằng công cụ Row (Hàng) và Column (Cột).

Anh/chị đừng vội thấy tên gọi có vẻ kỹ thuật nhé, nó thực ra rất đơn giản thôi!

Phần 1: Row và Column là gì? Hãy tưởng tượng về một cái tủ sách!

Để dễ hình dung nhất, anh/chị hãy nghĩ về một cái tủ sách:

• Section của chúng ta chính là toàn bộ cái tủ sách đó.
• Mỗi Row (Hàng) là một cái kệ/tầng trong tủ sách. Anh/chị có thể có nhiều tầng kệ trong một cái tủ đúng không nào?
• Mỗi Column (Cột) là các vách ngăn trên một tầng kệ, giúp chia kệ đó thành nhiều ô nhỏ để đựng sách hoặc đồ trang trí.

Kết luận: Row giúp tạo ra các hàng ngang, và Column giúp chia các hàng ngang đó thành các cột dọc. Đây chính là “bí quyết” để tạo ra các bố cục chuyên nghiệp như: hình bên trái – chữ bên phải, hoặc liệt kê 3 dịch vụ nổi bật cạnh nhau.

Phần 2: Cách thêm một Row (Hàng) và chọn số Cột

Giả sử anh/chị đã tạo một Section (Mục) như hướng dẫn trước. Bây giờ bên trong Section đó đang trống trơn.

1. Bên trong Section trống, anh/chị sẽ thấy một nút dấu cộng (+) lớn. Hãy nhấn vào đó.
2. Một bảng các công cụ sẽ hiện ra. Anh/chị hãy tìm và chọn Row.
3. Bước quan trọng nhất đây rồi! Ngay sau khi chọn Row, một cửa sổ sẽ hiện ra hỏi anh/chị muốn chia Row này thành mấy cột. Đây là một số lựa chọn phổ biến nhất:
   • Một Cột (Single Column): Dùng khi anh/chị muốn nội dung trải dài hết hàng ngang (ví dụ: một đoạn văn bản dài, một banner lớn).
   • Hai Cột (Two Columns): Cực kỳ phổ biến! Dùng để tạo bố cục hình ảnh bên trái – chữ viết bên phải (hoặc ngược lại).
   • Ba Cột (Three Columns): Rất tuyệt vời để giới thiệu 3 sản phẩm, 3 dịch vụ, hoặc 3 ưu điểm nổi bật cạnh nhau.
   • Bốn Cột (Four Columns): Tương tự như 3 cột, dùng khi cần liệt kê nhiều mục hơn.
   • Các kiểu chia không đều (Ví dụ: 2/3 + 1/3): Dùng khi anh/chị muốn có một cột nội dung chính lớn hơn và một cột phụ nhỏ hơn ở bên cạnh.

Mẹo nhỏ: Anh/chị cứ chọn đại một kiểu mình nghĩ là phù hợp. Chúng ta hoàn toàn có thể thay đổi lại sau một cách dễ dàng!

Sau khi chọn xong, anh/chị sẽ thấy Row của mình đã được chia thành các cột, và trong mỗi cột lại có một dấu cộng (+) nho nhỏ để chúng ta thêm nội dung vào.

Phần 3: Các tùy chỉnh quan trọng với Row và Column

Sau khi đã có Row và Column, anh/chị có thể tinh chỉnh chúng cho đẹp hơn. Ở cột công cụ bên trái, anh/chị có thể nhấn vào chữ “Row” hoặc “Column” để xem các tùy chọn của nó.

1. Thay đổi lại số Cột (Rất dễ!)

Nếu anh/chị lỡ chọn 2 cột nhưng giờ lại muốn 3 cột thì sao?

• Nhấn vào “Row” ở cột công cụ bên trái.
• Ngay ở tab Options đầu tiên, anh/chị sẽ thấy mục “Columns”. Hãy chọn lại số cột mà mình mong muốn. Bố cục sẽ tự động cập nhật ngay lập tức.

2. Điều chỉnh độ rộng của từng Cột

Đôi khi anh/chị không muốn các cột rộng bằng nhau. Ví dụ, cột chứa ảnh chỉ cần nhỏ, còn cột chứa chữ cần rộng hơn.

• Nhấn vào “Column” mà anh/chị muốn thay đổi ở cột công cụ bên trái.
• Tìm đến mục “Span” (Độ rộng).
• Anh/chị sẽ thấy các con số như “6/12”, “4/12”. Hãy hiểu đơn giản là một hàng được chia thành 12 phần.
  • Nếu có 2 cột bằng nhau, mỗi cột sẽ là 6/12.
  • Nếu có 3 cột bằng nhau, mỗi cột sẽ là 4/12.
• Ví dụ: Anh/chị có 2 cột (6/12 và 6/12). Giờ anh/chị muốn cột trái to hơn, cột phải nhỏ hơn. Hãy chỉnh cột trái thành 8/12 và cột phải thành 4/12. (Tổng vẫn là 12).

3. Căn chỉnh nội dung trong Cột (Rất hữu ích!)

Hãy tưởng tượng anh/chị có 1 cột bên trái chứa ảnh rất cao, và 1 cột bên phải chỉ có vài dòng chữ. Mặc định, dòng chữ sẽ nằm ở trên cùng, trông không cân đối.

• Nhấn vào “Column” chứa vài dòng chữ đó.
• Tìm đến mục “Align” (Căn chỉnh).
• Chọn:
  • Top: Căn nội dung lên trên (mặc định).
  • Center: Căn nội dung ra giữa theo chiều dọc. (Rất đẹp!)
  • Bottom: Căn nội dung xuống dưới.

Phần 4: Ví dụ thực hành: Tạo một khu vực “Dịch vụ của chúng tôi”

Bây giờ chúng ta cùng thực hành tạo một khu vực có 3 dịch vụ nổi bật nằm cạnh nhau nhé!

1. Thêm một Section mới (nhấn dấu + ở cuối trang).
2. Bên trong Section, nhấn dấu + và chọn Row.
3. Trong cửa sổ hiện ra, chọn “Ba Cột” (Three Columns).
4. Bây giờ anh/chị đã có 3 cột trống. Hãy làm lần lượt cho từng cột:
   • Nhấn vào dấu + trong cột đầu tiên.
   • Chọn Image (Hình ảnh), tải lên ảnh biểu tượng cho dịch vụ 1.
   • Ngay bên dưới ảnh vừa thêm, nhấn tiếp vào dấu + và chọn Text (Văn bản).
   • Trong bảng chỉnh sửa Text, hãy viết tên và mô tả ngắn cho dịch vụ 1.
5. Lặp lại y hệt bước 4 cho cột thứ hai và cột thứ ba với hình ảnh và nội dung tương ứng.

Kết quả: Anh/chị đã có một khu vực giới thiệu 3 dịch vụ cực kỳ chuyên nghiệp và cân đối!

Phần 5: Nhắc nhở cuối cùng

• Thứ tự luôn là: Section (Tủ sách) -> Row (Kệ) -> Column (Vách ngăn) -> Nội dung (Sách vở). Nắm được quy trình này là anh/chị đã thành công 50% rồi.
• Cứ mạnh dạn thử: Đừng ngại thử thay đổi độ rộng cột, căn chỉnh nội dung. Nếu không ưng ý, nút “Undo” (Hoàn tác) ở góc dưới bên trái luôn sẵn sàng giúp anh/chị quay lại.
• Lưu lại thành quả: Luôn nhớ nhấn Apply sau mỗi lần chỉnh sửa nhỏ và nhấn Update (nút màu xanh to ở trên cùng) khi đã hoàn tất mọi thứ để lưu lại thay đổi trên trang web.