Hướng dẫn kiểm soát bố cục khi dùng WordPress Block Editor

Chỉ cần bạn kiểm soát được bố cục khi dùng Block Editor thì bạn đã có thể tự thiết kế gần như 80% tất cả các trang trên site của bạn mà không cần dùng các trình tạo trang trả phí.

Tuy nhiên, việc làm chủ bố cục trong Block Editor thường được xem là thách thức lớn với các bạn mới. Hãy cùng tìm hiểu sự khác biệt giữa:

• Nhóm - Group
• Cột - Column
• Lưới - Grid
• Hàng ngang - Row
• Hàng dọc - Stacked

Khác nhau ở đâu và nên dùng trong trường hợp nào?

1. Nhóm (Group)

Group là block bố cục phổ biến nhất trong WordPress và cũng là block bạn sẽ sử dụng nhiều nhất khi thiết kế.

Group hoạt động như một thẻ <section>, đóng vai trò là vùng chứa lớn nhất vì bạn có thể kiểm soát được chiều rộng tối đa của các phần tử bên trong.

Bên cạnh đó, Group còn được sử dụng thường xuyên như bước trung gian trước khi chuyển đổi thành các block lưới, hàng ngang và xếp chồng.

2. Cột (Column)

Block cột được dùng khi bạn muốn chia bố cục theo tỷ lệ phần trăm cố định. Mỗi cột sẽ có nhiệm vụ chứa các phần tử con tách biệt với nhau.

Cột thường được dùng cho mỗi section riêng biệt hoặc tạo cả một bố cục lớn như trang với thanh bên trái phái, trang với 2 thanh bên,...

Khác với lưới, cột mặc định không canh đều chiều cao. Bạn sẽ thấy ở video, Cường phải chỉnh chiều cao 100% để canh đều trước khi dùng phân phối giãn đều.

3. Lưới (Grid)

Lưới có thể co giãn, xuống hàng và rất phù hợp khi bạn có các phần tử lặp đi lặp lại.

Để dễ hiểu thì lưới là bố cục mà mọi theme dùng để hiển thị các bài viết blog ở dạng thẻ trên trang lưu trữ bloc archive hay trang danh mục của bạn. Khi bạn xuất bản bài mới, 1 thẻ mới sẽ được thêm vào và hiển thị ưu tiên ở đầu.

Thêm, bớt phần tử linh động là lý do bạn dùng bố cục lưới và một số tính năng tùy chỉnh khác với cột và hàng ngang.

4. Hàng ngang (Row)

Hàng ngang (Row) là lựa chọn lý tưởng cho thiết kế thanh điều hướng nhờ khả năng co giãn và canh chỉnh linh hoạt.

Đặc biệt phù hợp cho thiết kế responsive, Hàng ngang vượt trội hơn so với Lưới trong việc hiển thị tối ưu trên cả máy tính và thiết bị di động.

Hàng ngang tập trung vào việc tùy chỉnh các phần tử con để lấp đầy 100% chiều ngang màn hình, đảm bảo hiển thị nhất quán trên mọi thiết bị.

Tính năng xuống hàng tự động được tích hợp sẵn giúp tối ưu hóa trải nghiệm người dùng trên thiết bị di động.

5. Hàng dọc (Stack)

Thực tế bạn có thể xem là hàng dọc cho dễ hiểu. Đây là block ít gây nhầm lẫn nhất và dễ dùng nhất.

Bản thân block xếp chồng thân thiện cả trên máy tính lẫn di động. Là một trong những block bạn dùng mà cảm thấy yên tâm dùng nhất.

Để thấy rõ hơn bạn hãy xem video để biết thêm chi tiết và đừng quên để lại các câu hỏi để thảo luận bên dưới bài viết này.

#blueky