Cách nhóm block trong wordpress

Khi bạn tạo và chỉnh sửa các trang bằng trình chỉnh sửa khối WordPress, có lẽ bạn đã nhiều lần thất vọng khi cố gắng thay đổi bố cục hoặc kiểu của một số khối mà không cần chạm vào mã. Đặc biệt khi bạn dùng đến việc tạo các cột để tạo bố cục cho các cột không được dự định

Trong bài đăng này, chúng ta sẽ thấy rằng chúng ta có nhiều lựa chọn thay thế phù hợp hơn cho một số bố cục phần trang. Với một vài ví dụ, bạn sẽ thấy một số khả năng được cung cấp bởi các khối nhóm, hàng và ngăn xếp để giải quyết một số vấn đề mà chúng ta có thể gặp phải với các cột.

Đối với các ví dụ được hiển thị trong bài đăng này, tôi đã sử dụng phiên bản WordPress 6. 0. 1 và chủ đề Hai Mươi Hai Mươi Hai

Ví dụ Sử dụng Cột

Ví dụ, hãy xem hai bố cục đơn giản của nội dung phần đầu tiên mà chúng tôi muốn hiển thị trên trang của một công ty du lịch

Ví dụ đầu tiên về phần đầu tiên hiển thị trên trang web của công ty du lịch. Ví dụ thứ hai về phần đầu tiên hiển thị trên trang web của một công ty du lịch.

Để tạo lại ví dụ đầu tiên trong trình chỉnh sửa khối, trước tiên, một tùy chọn là thêm một khối bìa với hình ảnh đã chọn, sau đó thêm một vài cột có kích thước khác nhau. Cột bên phải chiếm một phần ba và chứa nội dung (i. e. tiêu đề, đoạn văn và hai nút)

Tạo phần đầu tiên với một khối bìa và hai cột

Khi xem ở kích thước đầy đủ, bố cục trông đẹp. Nhưng nếu chúng ta giảm kích thước của cửa sổ, trình duyệt sẽ giữ màn hình ở dạng cột và hiển thị các nút chồng lên nhau

Hiển thị ví dụ đầu tiên trong cửa sổ kích thước nhỏ hơn

Bạn có thể thấy rằng với giải pháp này, chúng tôi không chỉ thêm một cột trống mà còn không chính xác là màn hình mà chúng tôi đang tìm kiếm trên các thiết bị nhỏ hơn

Tương tự, đối với ví dụ thứ hai, trước tiên chúng ta cũng thêm một khối bìa, sau đó là một vài cột và cuối cùng là nội dung. Nội dung hiện chứa biểu tượng phong bì theo sau là địa chỉ email. Chúng tôi không thể sử dụng khối phương tiện và văn bản vì kích thước tối thiểu của hình ảnh khối vượt quá kích thước của những gì chúng tôi muốn hiển thị… vì vậy, một lần nữa, chúng tôi sử dụng hai cột. một cho biểu tượng, một cho văn bản

Tạo ví dụ thứ hai với các khối bìa và cột

Như trước đây, ngoài việc thêm các cột trống, bằng cách giảm kích thước của cửa sổ, kết quả hiển thị trên màn hình không chính xác như chúng ta mong muốn

Hiển thị ví dụ thứ hai trong cửa sổ kích thước nhỏ hơn

Như bạn có thể thấy trong hình ảnh trước, ngoài việc tất cả văn bản được nhóm rất nhiều ở bên trái, sự kết hợp giữa hình ảnh phong bì với địa chỉ email trông không được đẹp. Tỷ lệ bị mất và văn bản của thư bị hỏng

Hãy xem cách chúng ta có thể giải quyết các vấn đề trên nếu chúng ta sử dụng các khối nhóm, thô và ngăn xếp thay vì các cột

khối nhóm

Khối nhóm, như bạn chắc chắn biết, là một khối được sử dụng để nhóm một tập hợp các khối trong một vùng chứa. Nó giống như một khối cha mẹ với con cái

Chế độ xem danh sách chặn bao gồm cả khối nhóm. Chân trang của trình soạn thảo hiển thị vị trí của con trỏ trên khối nào.

Nó được sử dụng phổ biến nhất để nhóm một tập hợp các cột hoặc đoạn văn và sau đó điều chỉnh toàn bộ nhóm bằng cách, chẳng hạn như đặt màu nền hoặc xác định khoảng cách duy nhất và các khoảng cách lề cho những phần tử khác trong trang sử dụng

Thuộc tính khối nhóm

Bạn cũng có thể chỉ định kích thước tối đa cho tất cả nội dung của nó và thêm đường viền với một kiểu và màu nhất định

Trình mở khóa Nelio

Chuyển sang WordPress một cách an toàn trong khi vẫn giữ thiết kế và nội dung của bạn

Cải thiện SEO của bạn ngay hôm nay và tăng tốc độ trang web của bạn bằng cách chuyển đổi các trang của bạn thành các tiêu chuẩn HTML, CSS và WordPress. Không cần kiến ​​thức kỹ thuật, bạn sẽ chỉ trả tiền cho những gì bạn cần

Thử ngay bây giờ

Các khối hàng và ngăn xếp

Khối hàng và khối ngăn xếp là một loại khối cho phép bạn chèn nhiều khối vào một hàng (hoặc cột, với khối ngăn xếp) và đặt chúng cách đều nhau. Bạn có thể sử dụng khối hàng hoặc ngăn xếp để tạo ngăn hoặc thêm nhiều mục trên cùng một dòng như thể chúng được đưa vào cột

Các thuộc tính mà bạn có thể chỉ định trong cả hai khối rất giống với các thuộc tính của nhóm, ngoại trừ việc bạn không thể chỉ định kích thước tối đa cho nội dung của nó. Và trong trường hợp này, bạn có thể thêm lời giải thích cho toàn bộ khối liên quan đến vùng chứa của nó

Thuộc tính khối hàng. Thuộc tính khối ngăn xếp.

Hãy xem cách chúng ta có thể tạo hai ví dụ trước bằng cách sử dụng các loại khối này thay vì cột và những lợi ích mà chúng mang lại cho chúng ta

Các ví dụ với Nhóm, Hàng và Khối ngăn xếp

Để tạo phần đầu tiên của ví dụ đầu tiên mà không sử dụng các cột, trước tiên chúng ta tạo khối bìa với hình ảnh như trước. Tiếp theo, bên trong khối bìa, chúng tôi thêm một khối nhóm. Một trong những đặc điểm của khối nhóm là căn chỉnh của nó luôn có chiều rộng đầy đủ và nó được căn giữa trong vùng chứa của nó. Do đó, bằng cách thêm tiêu đề, đoạn văn và hai khối và căn giữa từng khối này, kết quả sẽ như sau

Ví dụ về khối đầu tiên được tạo bằng khối bìa và khối nhóm

Đây không phải là những gì chúng tôi muốn ban đầu, vì khối nhóm hiển thị cho chúng tôi tất cả thông tin ở trung tâm thay vì ở bên phải của khối bìa

Ví dụ 1 được tạo bằng khối nhóm

Nhưng nó có lợi thế là chúng ta có thể chỉ ra chiều rộng tối đa cho nó để văn bản được hiển thị không chiếm toàn bộ chiều rộng của khối bìa. Và không giống như cột, cho dù chúng ta giảm kích thước cửa sổ bao nhiêu, các nút luôn được căn chỉnh cạnh nhau

Ví dụ 1 được tạo với khối nhóm giới hạn chiều rộng của khối

Làm cách nào để hiển thị nhóm ở bên phải của hình ảnh?

Sau khi tạo khối bìa, hãy thêm khối ngăn xếp và đặt căn phải. Tiếp theo, thêm khối nhóm giới hạn kích thước của nó và thêm nội dung

Ví dụ 1 được tạo bằng khối ngăn xếp và nhóm

Bây giờ, chúng tôi không có bất kỳ khối trống nào và khi xem trang với bất kỳ kích thước trang nào, nội dung luôn được hiển thị với các nút được căn chỉnh cạnh nhau

Hiển thị ví dụ đã tạo trong một cửa sổ nhỏ hơn

Ví dụ thứ hai rất giống nhau, nhưng làm cách nào để giải quyết vấn đề về biểu tượng và địa chỉ email?

Ví dụ 2 được tạo bằng các khối ngăn xếp, nhóm và hàng

Bây giờ, khi chúng tôi giảm kích thước của cửa sổ, phần hiển thị của phần đầu tiên của trang vẫn trông đẹp mắt, giữ cho hình ảnh và địa chỉ email được căn chỉnh và không làm vỡ văn bản

Xem trước ví dụ thứ hai được tạo bằng các khối ngăn xếp, hàng và nhóm trong cửa sổ kích thước giảm

Phần kết luận

Với hai ví dụ này, chúng ta có thể thấy rằng một số vấn đề về bố cục mà chúng ta gặp phải với các cột giờ đây có thể được giải quyết bằng các khối nhóm, ngăn xếp và hàng. Với các khối này, bạn có được sự linh hoạt đối với các cột bằng cách có thể căn chỉnh nội dung và điều chỉnh lề. Ngoài ra, bạn không bị buộc phải sử dụng các cột trống không có ý nghĩa gì. Vì vậy, hãy quên việc tạo các trang có cột trống

Tôi có thể nhóm các khối trong WordPress không?

Khối nhóm là gì?