Bạn có muốn hiển thị trang Blog DIVI của mình dưới dạng lưới nhiều cột không?
Mô-đun Blog của Divi có thể hiển thị các bài đăng trên blog trong bố cục toàn chiều rộng hoặc lưới. Nếu bạn chọn bố cục lưới, số cột tối đa bạn có thể có là ba.
Trong hướng dẫn này, chỉ với một vài đoạn CSS, blog của bạn sẽ biến thành một bố cục lưới nhiều cột đẹp mắt. Ngoài ra, các cột sẽ mượt mà và phản hồi trên mọi kích thước trình duyệt, do đó bạn không phải lo lắng về việc cập nhật các truy vấn phương tiện hoặc cài đặt phản hồi đó.
Bạn cũng có thể tham khảo bài viết của chúng tôi để biết Cách tạo trang blog với mô-đun DIVI Blog.
khảo sát
Trước khi bắt đầu hướng dẫn này, trước tiên chúng ta hãy xem kết quả mà chúng ta muốn đạt được.
Tải DIVI ngay bây giờ !!!
Định cấu hình mô-đun Blog với bố cục toàn màn hình
Mô-đun Blog của DIVI có thể được sử dụng để thêm blog ở bất kỳ đâu trên Website. Nó thực sự giúp bạn dễ dàng tạo một trang blog trong Divi. Tất cả những gì bạn phải làm là thêm mô-đun Blog vào trang bằng Trình tạo Divi.
Đối với hướng dẫn này, chúng tôi sẽ sử dụng bố cục blog được tạo sẵn từ một trong những gói bố cục miễn phí của DIVI đã chứa mô-đun Blog với kiểu cơ bản.
Để tải bố cục blog được tạo sẵn:
- Tạo một trang mới từ bảng điều khiển WordPress
- Đặt tên có liên quan và nhấp vào 'Sử dụng Divi Builder'
- Nhấp vào “Chọn bố cục”
- Nhập vào thanh tìm kiếm 'Nhà thiết kế thời trang' và chọn bố cục 'Trang blog nhà thiết kế thời trang'
- Đảm bảo chọn Bố cục Blog và sau đó nhấp vào “Chọn Bố cục”
Khi bố cục tải, hãy tìm mô-đun Blog được sử dụng để hiển thị các bài đăng trên blog và mở cài đặt.
Đặt số lượng bài đăng
Trong cài đặt blog, hãy cập nhật nội dung để giới hạn số lượng bài đăng ở mức 10. (Điều này chủ yếu là vì lý do thẩm mỹ, vì lưới của chúng tôi cuối cùng sẽ bao gồm hai hàng, mỗi hàng năm bài đăng trên blog.)
- Số vị trí: 10
Chọn bố cục Toàn màn hình
Vì chúng tôi sẽ bố trí blog của mình trong các cột bằng cách sử dụng CSS Grid, chúng tôi cần đảm bảo rằng bố cục của mô-đun Blog là 'Toàn màn hình'(không phải' Lưới '). Điều này sẽ đảm bảo rằng các bài đăng trên blog được xếp chồng lên nhau theo chiều dọc theo thứ tự trang bình thường của chúng.
Để thay đổi bố cục của mô-đun Blog, hãy mở cài đặt mô-đun và trong tab Kiểu, hãy mở menu thả xuống Mẫu và chọn Toàn màn hình .
Bây giờ mỗi bài đăng trên blog sẽ kéo dài toàn bộ chiều rộng của cột (hoặc vùng chứa mẹ).
Hãy thêm một đường viền cho các bài đăng trên blog. Cập nhật các tùy chọn đường viền như sau:
- Chiều rộng đường viền: 1px
- Màu viền: rgba (150,104,70,0.35)
Thêm một lớp CSS tùy chỉnh vào mô-đun Blog
Để nhắm mục tiêu hiệu quả mô-đun Blog cụ thể này (không phải mô-đun khác) bằng CSS của chúng tôi, chúng tôi cần cung cấp cho mô-đun của mình một lớp CSS tùy chỉnh. Trong tab nâng cao, thêm lớp CSS sau:
- Lớp CSS: et-blog-css-grid
Tạo bố cục nhiều cột với CSS Grid
Bây giờ mô-đun Blog của chúng tôi đã được thiết lập với bố cục toàn màn hình, chúng tôi đã sẵn sàng thêm CSS tùy chỉnh của mình.
Chúng tôi sẽ chèn một mô-đun Mã bên dưới mô-đun Blog để thêm CSS vào trang.
Trong hộp nhập mã, hãy thêm các thẻ kiểu cần thiết để bọc bất kỳ mã CSS nào được thêm vào một trang.
Bên trong các thẻ kiểu, hãy dán đoạn mã CSS sau:
.et-blog-css-grid > div {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
}
Dòng đầu tiên của CSS trình bày nội dung (hoặc mô-đun) ở dạng lưới.
display: grid;Dòng thứ hai của CSS xác định mô hình cột lưới.
grid-template-columns : repeat(auto-fill, minmax (200px, 1fr));Hàng thứ ba xác định khoảng cách giữa các mục lưới.
gap : 20px ;Tại thời điểm này, lưới đáp ứng năm cột đã sẵn sàng hoạt động. Trên thực tế, nếu bạn không muốn sử dụng phân trang hoặc đường viền cho các bài đăng trên blog của mình, bạn có thể dừng ở đây.
Đây là kết quả cho đến nay.
Tùy chỉnh các mục lưới
Sau đó, chúng ta có thể thêm một vài dòng CSS nhắm mục tiêu các phần tử lưới để chúng được căn chỉnh ở đầu mỗi hàng và có một số phần đệm.
.et-blog-css-grid .et_pb_post {
align-self: start;
padding: 15px;
}
Đã xóa phân trang lưới
Hiện tại, nếu bạn có phân trang đang hoạt động trên mô-đun blog, nó sẽ được coi là phần tử lưới cuối cùng trong lưới CSS. Để loại bỏ hoàn toàn phân trang khỏi lưới, chúng ta có thể đặt nó một vị trí tuyệt đối và đặt nó ngay bên dưới mô-đun blog. Để thực hiện việc này, hãy thêm CSS sau:
.et-blog-css-grid > div > div {
width: 100%;
position: absolute;
bottom: 0;
transform: translate(0%, 150%);
}
Hãy xem kết quả cho đến nay!
Mẹo: điều chỉnh kích thước của tất cả các hình ảnh nổi bật (hoặc hình thu nhỏ)
Tại thời điểm này, bạn có thể nhận thấy sự không nhất quán về chiều cao của các hình ảnh được hiển thị trên mỗi bài đăng trên blog. Nếu bạn muốn tất cả chúng có cùng chiều cao, bạn cũng có thể sử dụng CSS bổ sung để làm điều đó.
.et-blog-css-grid .entry-featured-image-url {
padding-top: 56.25%;
}
.et-blog-css-grid .entry-featured-image-url img {
position: absolute;
height: 100%;
width: 100%;
top: 0;
object-fit: cover;
}
Với tỷ lệ lề nội bộ cao nhất là 56,25%, chúng ta sẽ nhận được tỷ lệ khung hình là 16: 9 cho tất cả các hình ảnh của mình.
Hãy thoải mái điều chỉnh phần đệm trên vùng chứa hình ảnh để có được tỷ lệ khung hình bạn muốn cho hình ảnh của mình.
Kết quả cuối cùng
Và đây là bản xem trước cuối cùng của mô-đun Blog của chúng tôi với các cột và lưới mới của chúng tôi. Và như chúng ta có thể thấy, lưới hoàn toàn đáp ứng.
Tải DIVI ngay bây giờ !!!
Kết luận
Nó được thực hiện! Chúng tôi đã chỉ cho bạn trong hướng dẫn này cách sắp xếp các bài đăng trên blog của bạn theo các cột.
Chúng tôi có thể tái cấu trúc toàn bộ mô-đun Divi Blog thành một bố cục năm cột linh hoạt. Hy vọng điều này giúp bạn tiết kiệm thời gian và cung cấp cho bạn nhiều lựa chọn hơn để tạo các trang blog đẹp. Bạn cũng có thể tham khảo Cách tạo trang Blog với mô-đun Divi's Blog
Xem thêm tài nguyên của chúng tôi, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.
Nhưng trong lúc này, chia sẻ bài viết này trên các mạng xã hội khác nhau của bạn.
