Mô-đun Divi Blog có tùy chọn bố cục ở dạng lưới hữu ích cho các bài đăng trên blog của bạn. Mẫu lưới tổ chức các bài đăng trên blog của bạn thành các hộp hoặc bản đồ giúp đơn giản hóa khả năng hiển thị của các mục trên màn hình so với chế độ xem chuẩn.

Cài đặt mô-đun Blog cho phép bạn tùy chỉnh thiết kế tổng thể của mạng của bạn. Bạn có thể dễ dàng làm cho tất cả các thẻ của mình có cùng màu nền, phông chữ, lề, v.v. Tuy nhiên, các tùy chọn kiểu bị giới hạn trong thiết kế của toàn bộ lưới, điều này gây khó khăn áp dụng nhiều hoặc nhiều thiết kế khác nhau cho các bản đồ trong lưới.

Hôm nay tôi sẽ chỉ cho bạn cách nhắm mục tiêu và áp dụng nhiều kiểu cho các thẻ tạo nên lưới. blog của bạn sử dụng CSS tùy chỉnh. Tôi sẽ chỉ cho bạn cách áp dụng một kiểu khác nhau cho các tấm thẻ khác để tạo hiệu ứng bàn cờ. Tôi cũng sẽ chỉ cho bạn cách tạo kiểu cho mỗi thẻ khác nhau trên mỗi hàng và tôi sẽ chỉ cho bạn cách nhắm mục tiêu vào bất kỳ thẻ riêng lẻ nào.

Đây là 4 ví dụ về cách tùy chỉnh blog của bạn, bao gồm một số hiệu ứng di chuột mà bạn có thể sử dụng. Đến cuối hướng dẫn này, bạn sẽ có thể tạo ra những thiết kế tuyệt vời cho blog của bạn.

Các hướng dẫn khác về chủ đề Divi

Chúng ta hãy bắt đầu.

Cấu hình Layout Lưới cho blog của bạn

Trước khi bắt đầu với thiết kế thẻ mô-đun blog, hãy đảm bảo bạn có ít nhất các bài viết 12 đã được tạo với một hình ảnh trong hộp.

Khi tin nhắn của bạn đã được tạo, hãy tạo một trang mới. Trên trang mới của bạn, triển khai mô-đun blog trên cột có chiều rộng đầy đủ trong một phần tiêu chuẩn:

Định cấu hình bố cục của blog divi

Nhấn vào đây để chỉnh sửa các cài đặt của mô-đun Blog. Trong Cài đặt chung, thay đổi các cài đặt sau:

  • Giao diện: Lưới (Grid)
  • Số lượng bài viết: 12
  • Hiển thị hình ảnh nổi bật: CÓ
  • Nút Read more: ON

Cấu hình lưới divi

Trong CSS tùy chỉnh, hãy nhập "thẻ lưới" vào hộp văn bản ID CSS. Đó sẽ là một cách để chúng tôi chỉ cá nhân hóa mô-đun blog này.

thẻ lưới css divi

Lưu các thay đổi của bạn

Cách hiểu bố cục "Lưới" cho blog

Bây giờ bạn có lưới blog của bạn tại chỗ, điều quan trọng là phải hiểu cấu trúc của cách bố trí của lưới điện để bạn có thể xác định vị trí bản đồ của các module blog bạn muốn tùy chỉnh.

Lưới blog được cấu hình với bố cục ba cột. Sau đây là hình minh họa của lưới blog với các bài viết trên blog 12 được chia thành ba cột:

Trình bày về bố cục lưới divi

Các thẻ vé blog được sắp xếp từ trên xuống dưới trong mỗi cột. Vì vậy, nếu bạn muốn cung cấp cho họ một số, bạn sẽ cần đếm 1 thành 4 trên mỗi chiều dài từ trên xuống dưới:

Đếm bài báo divi

Vì bạn biết thứ tự số của mỗi thẻ blog dưới mỗi cột, bạn cũng có thể xác định mỗi thẻ là số lẻ hoặc số chẵn như sau:

Số chẵn và số lẻ divi

cổng thiết kế Ví dụ

Ví dụ n ° 1: Thiết kế lưới "Rô"

Đối với ví dụ đầu tiên này, tôi sẽ nhắm mục tiêu tất cả các thẻ lẻ trong mô-đun blog (thẻ 1 và 3) trong cột đầu tiên tạo cho chúng màu nền xám đậm. Để thực hiện việc này, hãy chuyển đến "Divi → Tùy chọn chủ đề" và thêm CSS sau vào hộp văn bản CSS tùy chỉnh:

#gridcard .column: first-child bài viết: nth-con (lẻ) {background: #333; }

Dưới đây là một phân tích về những gì mã này không:

#gridcard = id của toàn bộ mô-đun blog

.column: first-child = chọn cột đầu tiên trong mô-đun blog

bài đăng: nth-child (lẻ) = chọn tất cả các mục lẻ (hoặc thẻ) trong cột

Kết hợp tất cả lại với nhau, điều này sẽ chọn các thẻ được đánh số lẻ trong cột đầu tiên của mô-đun blog với ID "thẻ lưới".

Sau đó, thêm văn bản màu trắng của bạn sẽ đi trên nền tối bằng cách thêm CSS sau đây:

#gridcard .column: first-child bài viết: nth-con (lẻ) .entry-tiêu đề, #gridcard .column: first-child bài viết: nth-con (lẻ) .post-meta, #gridcard .column: first-child Điều: nth-con (lẻ) .post-meta một, #gridcard .column: first-child bài viết: nth-con (lẻ) .post-content p {color: # ffffff; }

Mã này nhắm mục tiêu tất cả các thành phần văn bản trong thẻ mô-đun blog (bao gồm tiêu đề, meta bài đăng, liên kết meta bài đăng và nội dung của bài viết) và cho chúng màu trắng.

Đây là kết quả:

Tùy chỉnh lưới divi lẻ

Bước tiếp theo trong việc tạo bố cục bàn cờ của chúng tôi là nhắm mục tiêu các thẻ được đánh số lẻ trên cột thứ ba và áp dụng nền màu xám đậm và văn bản màu trắng giống như bạn đã làm trong cột đầu tiên. Thêm CSS sau vào hộp văn bản CSS tùy chỉnh:

#gridcard .column: bài viết con cuối: nth-con (lẻ) {background: # 333; } #gridcard .column: bài viết last-child: nth-child (lẻ) .entry-title, #gridcard .column: last-child article: nth-child (lẻ) .post-meta, #gridcard .column: last- bài viết con: nth-child (lẻ) .post-meta a, #gridcard .column: last-child article: nth-child (lẻ) .post-content p {color: #ffffff; }

Mã này nhắm mục tiêu đến cột "cuối cùng" (trong trường hợp này, cột thứ ba là cột cuối cùng) với phần tử biệt hiệu "con cuối cùng".

Đối với cột thứ hai (hoặc giữa), nhắm mục tiêu các thẻ chẵn để hoàn thành hiệu ứng bàn cờ. Để làm điều này, chúng ta cần thêm CSS sau:

#gridcard .column: nth-child (2) article: nth-child (chẵn) {background: # 333; } #gridcard .column: nth-child (2) article: nth-child (Even) .entry-title, #gridcard .column: nth-child (2) article: nth-child (Even) .post-meta, # gridcard .column: nth-child (2) article: nth-child (chẵn) .post-meta a, #gridcard .column: nth-child (2) article: nth-child (Even) .post-content p {color : #fff; }

Bây giờ hãy kiểm tra các trang blog để xem cách bố trí bàn cờ của các thẻ Blog module.

Bố cục lưới divi bàn cờ

Ví dụ # 2: Thêm Hiệu ứng Di chuột với Bố cục Rô

Khi bạn biết cách nhắm mục tiêu các thẻ mô-đun blog, bạn có thể chỉnh sửa một cách sáng tạo bất kỳ yếu tố nào bên trong thẻ.

Đối với ví dụ này, tôi sẽ sử dụng bố cục bàn cờ và lần này tôi sẽ thay đổi các hình ảnh nổi bật từ bản đồ màu xám đậm sang màu đen và trắng khi di chuột qua bản đồ. Và, tôi sẽ làm cho hình ảnh trang nhất của thẻ trắng sáng hơn khi di chuột qua thẻ. Để thực hiện việc này, hãy thêm CSS sau vào vùng CSS tùy chỉnh (đảm bảo tắt hoặc cắt mã khác để mã không tương thích với mã mới):

#gridcard .column: bài viết con đầu tiên: nth-child (lẻ), #gridcard .column: bài viết con cuối: nth-con (lẻ), #gridcard .column: nth-child (2) bài viết: nth-child (chẵn) {background: # 333; } #gridcard .column: bài viết đầu tiên: nth-child (lẻ) .entry-title, #gridcard .column: bài viết đầu tiên: nth-child (lẻ) .post-meta, #gridcard .column: first- bài viết con: nth-child (lẻ) .post-meta a, #gridcard .column: bài viết con đầu tiên: nth-child (lẻ) .post-content p, #gridcard .column: last-child article: nth-child (lẻ) .entry-title, #gridcard .column: last-child article: nth-child (lẻ) .post-meta, #gridcard .column: last-child article: nth-child (lẻ) .post-meta a , #gridcard .column: last-child article: nth-child (lẻ) .post-content p, #gridcard .column: nth-child (2) article: nth-child (chẵn) .entry-title, #gridcard. cột: nth-child (2) bài viết: nth-child (chẵn) .post-meta, #gridcard .column: nth-child (2) bài viết: nth-child (chẵn) .post-meta a, #gridcard .column : nth-child (2) article: nth-child (chẵn) .post-content p {color: #fff; } #gridcard .column: nth-child (2) article: nth-child (chẵn): hover img, #gridcard .column: first-child article: nth-child (lẻ): hover img, #gridcard .column: last -child article: nth-child (lẻ): hover img {-webkit-filter: grayscale (1); bộ lọc: thang độ xám (1); } #gridcard .column: nth-child (2) article: nth-child (lẻ): hover img, #gridcard .column: first-child article: nth-child (chẵn): hover img, #gridcard .column: last -child article: nth-child (Even): hover img {-webkit-filter: Bright (1.5); bộ lọc: độ sáng (1.5); }

Bạn cũng có thể thêm hiệu ứng đảo ngược trên các thẻ để khi bạn di chuột qua các thẻ màu trắng, chúng sẽ chuyển sang màu xám đậm và khi bạn di chuột qua các thẻ màu xám đậm, chúng chuyển sang màu trắng.

Thêm CSS sau đây và nhiều hơn nữa CSS trên:

#gridcard .column article, #gridcard .column article img {-webkit-transfer: all 0.8s; -moz-chuyển tiếp: tất cả 0.8s; chuyển tiếp: tất cả 0.8s; } #gridcard .column: bài viết con đầu tiên: nth-child (lẻ): hover, #gridcard .column: bài viết con cuối: nth-child (lẻ): di chuột, #gridcard .column: nth-child (2) article: nth-child (Even): hover {background: #fff; } #gridcard .column: bài viết con đầu tiên: nth-con (lẻ): di chuột .entry-title, #gridcard .column: bài viết con đầu tiên: nth-con (lẻ): di chuột .post-meta, #gridcard. cột: bài viết con đầu tiên: nth-con (lẻ): di chuột .post-meta a, #gridcard .column: bài viết con đầu: nth-con (lẻ): di chuột .post-content p, #gridcard .column: bài viết con cuối: nth-con (lẻ): di chuột .entry-title, #gridcard .column: bài viết con cuối: nth-con (lẻ): di chuột .post-meta, #gridcard .column: bài viết con cuối cùng : nth-child (lẻ): di chuột qua .post-meta a, #gridcard .column: bài viết cuối-con: nth-child (lẻ): di chuột .post-content p, #gridcard .column: nth-child (2) article: nth-child (Even): hover .entry-title, #gridcard .column: nth-child (2) article: nth-child (Even): hover .post-meta, #gridcard .column: nth-child ( 2) article: nth-child (Even): di chuột .post-meta a, #gridcard .column: nth-child (2) article: nth-child (Even): hover .post-content p {color: # 333; } #gridcard .column: first-child article: nth-child (Even): hover, #gridcard .column: last-child article: nth-child (Even): hover, #gridcard .column: nth-child (2) bài viết: nth-child (lẻ): hover {background: # 333; } #gridcard .column: first-child article: nth-child (Even): hover .entry-title, #gridcard .column: first-child article: nth-child (Even): hover .post-meta, #gridcard. cột: bài viết con đầu tiên: nth-con (chẵn): di chuột .post-meta a, #gridcard .column: bài viết con đầu: nth-con (chẵn): di chuột .post-content p, #gridcard .column: last-child article: nth-child (Even): hover .entry-title, #gridcard .column: last-child article: nth-child (Even): hover .post-meta, #gridcard .column: last-child article : nth-child (Even): di chuột .post-meta a, #gridcard .column: last-child article: nth-child (Even): hover .post-content p, #gridcard .column: nth-child (2) bài viết: nth-con (lẻ): di chuột .entry-title, #gridcard .column: nth-child (2) bài viết: nth-child (lẻ): di chuột .post-meta, #gridcard .column: nth-child ( 2) bài viết: nth-child (lẻ): di chuột .post-meta a, #gridcard .column: nth-child (2) bài viết: nth-child (lẻ): di chuột .post-content p {color: #fff; }

Bây giờ hãy xem hiệu ứng trên blog của bạn.

Tùy chỉnh lưới khi divi divi

Ví dụ # 3: Tùy chỉnh bản đồ của dòng

Đối với ví dụ thứ ba, tôi sẽ áp dụng cùng một nền tối và văn bản màu trắng cho các thẻ ở mọi hàng khác (không phải cột). Để làm điều này, bạn cần nhắm mục tiêu tất cả các thẻ chẵn trong mỗi cột. Đi tới “Divi → Tùy chọn” của chủ đề và đảm bảo tắt hoặc xóa bất kỳ mã CSS nào trước đó mà bạn đã thêm kể từ khi bắt đầu hướng dẫn này. Sau đó, thêm CSS sau:

# thẻ bài viết: nth-child (chẵn) {background-color: # 333; } #gridcard article: nth-child (Even) .entry-title, #gridcard article: nth-child (Even) .post-meta, #gridcard article: nth-child (Even) .post-meta a, #gridcard article : nth-child (chẵn) .post-content p {color: #fff; }

Đây là kết quả:

Kết quả cấu hình theo dòng divi

Ví dụ # 4: Thiết kế bản đồ lưới cụ thể

Một số bạn có thể muốn chọn một thẻ cụ thể. Để thực hiện việc này, bạn cần tìm ID mặt hàng duy nhất được gán tự động cho mỗi thẻ của bạn. Đối với ví dụ này, tôi đang sử dụng trình duyệt Chrome.

Đi tới trang hiển thị mô-đun blog của bạn và nhấp chuột phải vào một trong các thẻ của bạn. Trong hộp tùy chọn xuất hiện, hãy chọn "Kiểm tra" (một số trình duyệt có thể có "Kiểm tra mục" hoặc thứ gì đó tương tự. Thao tác này sẽ triển khai cửa sổ công cụ dành cho nhà phát triển hiển thị cả html và css cho trang web. Tìm thẻ bài viết bao bọc bài viết của bạn và viết ra ID bài viết được chỉ định cho nó. Đây là công cụ chọn bạn nên sử dụng để nhắm mục tiêu thẻ cá nhân của mình. Đối với ví dụ của tôi, tôi có nhấp chuột phải và nhấp vào kiểm tra để tìm id "post-3466".

Như dưới đây:

Sửa đổi một bài báo

Để nhắm mục tiêu thẻ CSS này để cung cấp cho anh ta một nền màu xám với một phông chữ màu trắng, bạn phải sử dụng CSS sau đây:

# post-3466 {background: # 333333; } # post-3466 .entry-title, # post-3466 .post-meta, # post-3466 .post-meta a, # post-3466 .post-content p {color: #fff; }

Bây giờ bản đồ có phong cách cụ thể được áp dụng cho nó.

Đó là tất cả!

cuối cùng suy nghĩ

Đây chỉ là một vài ví dụ về nhiều kiểu khác nhau mà bạn có thể thực hiện bằng cách sử dụng kiểu nhắm mục tiêu CSS này của thẻ mô-đun Blog. Bạn không còn phải giữ cùng một kiểu cho mỗi thẻ. Bạn có thể thiết kế chúng theo cách bạn muốn.

Nếu bạn có bất kỳ câu hỏi hoặc gợi ý cảm thấy tự do để cung cấp cho họ với tôi.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG CHỦ ĐỀ DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]TẢI XUỐNG TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Hướng dẫn Divi khác