Bỏ qua đến nội dung chính

Làm thế nào để tùy chỉnh lưới của một blog với Divi

Divi: chủ đề WordPress dễ sử dụng nhất

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

hơn Tải xuống 600.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í. [Khuyến nghị]

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 đảm bảo 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 được giới hạn trong toàn bộ thiết kế của lưới, điều này gây khó khăn ứng dụng của nhiều thiết kế hoặc khác nhau cho các thẻ 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 hơn một kiểu cho các thẻ tạo nên lưới của blog của bạn bằ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 mỗi bản đồ 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 bản đồ khác nhau theo từng dòng và tôi sẽ chỉ cho bạn cách nhắm mục tiêu bất kỳ bản đồ 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ề 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ấ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 trong đầu: CÓ
  • Nút Read more: ON

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

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:

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

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

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:

Vì bạn biết thứ tự số của từng 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:

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

Ví dụ # 1: Thiết kế lưới rô

Trong ví dụ đầu tiên này, tôi sẽ nhắm mục tiêu tất cả các thẻ lẻ của mô-đun blog (thẻ 1 và 3) trong cột đầu tiên 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

Đặt mọi thứ 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 đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Bước tiếp theo trong việc tạo bố cục rô 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 đen và văn bản màu trắ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 cuối cùng con: thứ n-con (lẻ) {background: #333; } #gridcard .column: Bài viết cuối cùng con: thứ n-con (lẻ) .entry-tiêu đề, #gridcard .column: Bài viết cuối cùng con: thứ n-con (lẻ) .post-meta, #gridcard .column: last- Điều con: thứ n-con (lẻ) .post-meta một, #gridcard .column: bài viết cuối cùng con: thứ n-con (lẻ) .post-content p {color: # ffffff; }

Mã này đề cập đế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ử giả "con cuối".

Đố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-con (2) Item: nth-con (thậm chí) {background: #333; } #gridcard .column: nth-con (2) Bài chi tiết: nth-con (thậm chí) .entry-tiêu đề, #gridcard .column: nth-con (2) Bài chi tiết: nth-con (thậm chí) .post-meta # gridcard .column: nth-con (2) bài chi tiết: nth-con (thậm chí) .post-meta có #gridcard .column: nth-con (2) bài chi tiết: nth-con (thậm chí) .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.

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 bản đồ của mô-đun blog, bạn có thể sửa đổi một trong các yếu tố bên trong bản đồ một cách sáng tạo.

Trong 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 hình ảnh thành một trong những thẻ màu xám đen trắng khi di chuột qua bản đồ. Và, tôi sẽ làm cho hình ảnh thành một trong những thẻ trắng sáng hơn khi di chuột qua bản đồ. Để thực hiện việc này, hãy thêm CSS sau vào hộp CSS tùy chỉnh (đảm bảo tắt hoặc cắt mã khác để nó không tương thích với mã mới):

#gridcard .column: first-child bài viết: nth-con (lẻ) #gridcard .column: Bài viết cuối cùng con: thứ n-con (lẻ) #gridcard .column: nth-con (2) Item: thứ n con (thậm chí) {background: #333; } #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: thứ nhất Điều con: thứ n-con (lẻ) .post-meta đã #gridcard .column: bài viết first-child: nth-con (lẻ) .post-content p #gridcard .column: bài viết cuối cùng con: thứ n con (lẻ) .entry-tiêu đề, #gridcard .column: bài viết cuối cùng con: thứ n-con (lẻ) .post-meta, #gridcard .column: bài viết cuối cùng con: thứ n-con (lẻ) có .post-meta , #gridcard .column: bài viết cuối cùng con: thứ n-con (lẻ) .post-content p #gridcard .column: nth-con (2) bài chi tiết: nth-con (thậm chí) .entry-tiêu đề, #gridcard. cột: thứ n-con (2) mục: thứ n-con (thậm chí) .post-meta, #gridcard .column: nth-con (2) mục: thứ n-con (thậm chí) .post-meta một, #gridcard .column : thứ n-con (2) bài chi tiết: nth-con (thậm chí) .post-content p {color: #fff; } #gridcard .column: nth-con (2) Item: nth-con (thậm chí): hover img, #gridcard .column: first-child bài viết: nth-con (lẻ): hover img, #gridcard .column: cuối cùng Điều -child: nth-con (lẻ): hover {-webkit img lọc: màu xám (1); bộ lọc: thang độ xám (1); } #gridcard .column: nth-con (2) Item: nth-con (lẻ): hover img, #gridcard .column: first-child bài viết: nth-con (thậm chí): hover img, #gridcard .column: cuối cùng Điều -child: nth-con (thậm chí): hover {-webkit img lọc: độ sáng (1.5); bộ lọc: độ sáng (1.5); }

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

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

#gridcard .column bài viết #gridcard .column phần img {-webkit-chuyển tiếp: tất cả 0.8s; moz-chuyển tiếp: tất cả 0.8s; chuyển tiếp: tất cả 0.8s; } #gridcard .column: first-child bài viết: nth-con (lẻ): hover, #gridcard .column: Bài viết cuối cùng con: thứ n-con (lẻ): hover, #gridcard .column: nth-con (2) Điều: nth-con (thậm chí): hover {background: #fff; } #gridcard .column: first-child bài viết: nth-con (lẻ): hover .entry-tiêu đề, #gridcard .column: first-child bài viết: nth-con (lẻ): hover .post-meta, #gridcard. cột: bài viết first-child: nth-con (lẻ): hover .post-meta có #gridcard .column: đầu tiên trẻ em bài chi tiết: nth-con (lẻ): hover .post-content p #gridcard .column: Điều cuối cùng con: thứ n-con (lẻ): hover .entry-tiêu đề, #gridcard .column: bài viết cuối cùng con: thứ n-con (lẻ): hover .post-meta, #gridcard .column: mục cuối cùng con : thứ n-con (lẻ): hover .post-meta có #gridcard .column: bài viết cuối cùng con: thứ n-con (lẻ): hover .post-content p #gridcard .column: nth-con (2) Điều: nth-con (thậm chí): hover .entry-tiêu đề, #gridcard .column: nth-con (2) mục: thứ n-con (thậm chí): hover .post-meta, #gridcard .column: nth-con ( 2) bài chi tiết: nth-con (thậm chí): hover .post-meta có #gridcard .column: nth-con (2) bài chi tiết: nth-con (thậm chí): hover .post-content p {color: #333; } #gridcard .column: first-child bài viết: nth-con (thậm chí): hover, #gridcard .column: Bài viết cuối cùng con: thứ n-con (thậm chí): hover, #gridcard .column: nth-con (2) Điều: nth-con (lẻ): hover {background: #333; } #gridcard .column: first-child bài viết: nth-con (thậm chí): hover .entry-tiêu đề, #gridcard .column: Bài viết first-child: nth-con (thậm chí): hover .post-meta, #gridcard. cột: first-child bài viết: nth-con (thậm chí): hover .post-meta có #gridcard .column: bài viết first-child: nth-con (thậm chí): hover .post-content p #gridcard .column: Điều cuối cùng con: thứ n-con (thậm chí): hover .entry-tiêu đề, #gridcard .column: bài viết cuối cùng con: thứ n-con (thậm chí): hover .post-meta, #gridcard .column: mục cuối cùng con : thứ n-con (thậm chí): hover .post-meta có #gridcard .column: bài viết cuối cùng con: thứ n-con (thậm chí): hover .post-content p #gridcard .column: nth-con (2) Điều: nth-con (lẻ): hover .entry-tiêu đề, #gridcard .column: nth-con (2) mục: thứ n-con (lẻ): hover .post-meta, #gridcard .column: nth-con ( 2) bài chi tiết: nth-con (lẻ): hover .post-meta có #gridcard .column: nth-con (2) bài chi tiết: nth-con (lẻ): hover .post-content p {color: #fff; }

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

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ẻ trong mỗi hàng khác (và 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. Chuyển đến chủ đề "Divi → Tùy chọn" và đảm bảo bạn vô hiệu hóa 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:

Điều #gridcard: nth-con (thậm chí) {background-color: #333; } #gridcard bài viết: nth-con (thậm chí) .entry-tiêu đề, bài viết #gridcard: nth-con (thậm chí) .post-meta, bài viết #gridcard: nth-con (thậm chí) .post-meta một, phần #gridcard : nth-child (thậm chí) .post-content p {color: #fff; }

Đây là kết quả:

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ể. Để làm điều này, bạn phải tìm ID của mục duy nhất được tự động gán cho mỗi thẻ của bạn. Trong ví dụ này, tôi đang sử dụng trình duyệt Chrome.

Chuyển đến 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, chọn "Kiểm tra" (một số trình duyệt có thể có "Kiểm tra phần tử" hoặc một cái gì đó tương tự) Điều 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 của bạn Trang web, tìm thẻ của bài viết bao bọc bài viết của bạn và lưu ý ID của bài viết được gán cho nó. Đây là bộ chọn bạn cần sử dụng để nhắm mục tiêu thẻ cá nhân của bạn. nhấp chuột phải và nhấp vào đã kiểm tra để tìm ID bài 3466.

Như dưới đây:

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, 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. [Đề xuất]

Để 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, # 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 phong cách khác nhau mà bạn có thể thực hiện bằng cách sử dụng loại nhắm mục tiêu CSS này của thẻ mô-đun Blog. Bạn không còn phải giữ phong cách giống nhau cho mỗi thẻ. Bạn có thể thiết kế chúng theo ý 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.

Hướng dẫn Divi khác

Bài viết này chứa comments 20

  1. Bonjour,
    Tôi đã cố gắng hiển thị các bài đăng trên blog trong "lưới" với id "gridcard" nhưng nó không hoạt động. Bạn có thể giúp tôi được không ?

  2. Bonjour,
    Tôi thực sự là người mới bắt đầu, nhưng nhờ các hướng dẫn trực tuyến, tôi quản lý để xây dựng một blog đẹp.
    Thực sự, cảm ơn bạn vì điều này vì tôi chỉ phải sao chép mã và mọi thứ diễn ra hoàn hảo, tôi rất vui mừng với kết quả này.
    Cảm ơn một lần nữa, chúc một ngày tốt lành

  3. Xin chào Thierry
    Siêu hướng dẫn
    Tôi muốn biết nếu có thể tăng kích thước của hình ảnh lên
    Tôi muốn áp dụng phong cách này cho blog của tôi
    Merci

  4. Bonjour,
    Làm cách nào để tối ưu hóa bố cục này cho thiết bị di động (máy tính bảng)? Tôi không có Schabrettmuster nhưng màu sắc khác nhau cho mỗi bài đăng trên blog, theo một thứ tự cụ thể. Tất nhiên, điều này thay đổi khi chúng ta chuyển sang thiết bị di động và màu sắc không còn liên quan đến bài viết hay ...
    Có ai có ý tưởng ở đây không?

  5. Bonjour,

    Cảm ơn bạn cho bài viết này! Tôi cũng muốn sửa đổi "đọc thêm" ở cuối bài viết.
    Ví dụ, bạn có thể cho chúng tôi ví dụ về mã CSS để thay đổi văn bản và đặt nó vào một nút căn giữa hay không?

    En vous remerciant.
    Sophie

  6. Trong một số cá nhân trong CSS personalizado, por ejemplo:
    #gridcard .Column: nghệ thuật con đầu tiên: nth-child (impar) {background: #333; }

    da lỗi como el seigue: Mong đợi một FUNCTION hoặc IDENT sau dấu hai chấm tại dòng 1, col 18

    Liên quan

    1. Bonsoir,

      Blog của chúng tôi được dịch tự động từ tiếng Pháp. Tôi mời bạn chọn ngôn ngữ tiếng Pháp trong tiện ích ngôn ngữ nằm trên thanh trên cùng của blog của chúng tôi và mã CSS chính xác sẽ được hiển thị.

    2. usted escribió một nghệ thuật escrito ác, debería ser: artículo del primer hijo: không có arte del primer hijo:

      Bạn đã viết sai chính tả bài viết, nó phải là: bài viết con đầu tiên: không phải là nghệ thuật đầu tiên của con:

  7. Xin chào
    Cảm ơn bài viết. Tôi có một bản trình bày trong lưới (Chủ đề Divi) Tôi có hình thu nhỏ (ảnh) để trình bày các bài viết, mặt khác khi tôi nhấp để có quyền truy cập vào bài viết, hình ảnh xuất hiện lớn ở đầu Điều. Có cách nào để cung cấp cho nó cùng kích thước với hình thu nhỏ hoặc xóa nó trong chế độ xem bài viết không?
    Merci
    Patrick

  8. Bonjourn, bài báo siêu
    Tôi cố gắng may mắn ở đây, đôi khi chúng tôi xoay quanh một chủ đề trong nhiều tuần mà không tìm câu trả lời trong khi chủ đề tương tự là hợp lý cho người khác.

    Vì vậy, tôi đang tìm kiếm giải pháp để đưa ra một mạng lưới bài đăng, chỉ bao gồm hình ảnh nhưng chiều cao khác nhau, để được rõ ràng hơn, rằng một hình ảnh trên hai đã tăng gấp đôi chiều cao của hình ảnh tiếp theo.

    Một ý tưởng?

    Julien

  9. Lớn hướng dẫn! Tôi sẽ thử nghiệm ca vào cuối tuần này cho trang web của tôi.
    bạn có một giải pháp để loại bỏ các chất chiết xuất trong lưới?
    Merci à vous
    Sofhy

Để lại một bình luận

địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
16 cổ phiếu
cổ phiếu7
tweet2
Enregistrer7