Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí.

Mô-đun Blog của Divi có một tùy chọn bố cục lưới hữu ích cho các bài đăng trên blog của bạn. Mô hình lưới sắp xếp các bài đăng trên blog của bạn thành các hộp hoặc thẻ giúp bạn dễ dàng xem các bài đăng trên màn hình hơn so với chế độ xem tiêu 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 bằng cách 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 từng 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 từng thẻ khác nhau trên mỗi hàng và chỉ cho bạn cách nhắm mục tiêu bất kỳ thẻ riêng lẻ nào.

Vì vậy, đây là ví dụ 4 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. Vào cuối hướng dẫn này, bạn sẽ có thể tạo ra các thiết kế tuyệt vời cho blog của bạn.

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

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.

Gridcard 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

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn tạo Dễ dàng và Miễn phí bất kỳ trang web hoặc thiết kế blog với một cái nhìn chuyên nghiệp. Ngừng trả nhiều tiền cho một trang web mà bạn có thể tự làm.

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 của blog (bao gồm tiêu đề, metas bài viết, liên kết meta bài viết và nội dung bài viết) và gán cho chúng màu trắng.

Đây là kết quả:

Bạn có muốn bán sản phẩm của mình trên internet?

Tải xuống WooCommerce miễn phí, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress và dễ dàng tạo cửa hàng trực tuyến của bạn. Hoàn hảo cho người mới bắt đầu.

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 phần tử" hoặc thứ gì đó tương tự. công cụ công cụ phát triển hiển thị cả html và css của trang web của bạn. Tìm thẻ bài viết bao bọc bài viết của bạn và lưu ý ID bài viết được chỉ định cho nó. Đây là bộ 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 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 =" expand "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 TRANG CHỦ [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "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 DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Hướng dẫn Divi khác

%d các blogger thích trang này: