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 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 đảm bảo rằng tất cả các thẻ của bạn 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 thiết kế của toàn bộ lưới, điều này khiến cho việc này trở nên khó khăn việc áp dụng nhiều thiết kế 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 kiểu cho các thẻ tạo nên lưới của blog của bạn bằng cách sử dụng CSS tùy chỉnh. Tôi sẽ cho bạn thấy làm thế nào để áp dụng một phong cách khác nhau cho mỗi bản đồ khác, để tạo ra một hiệu ứng bàn cờ. Tôi cũng sẽ chỉ cho bạn cách tạo kiểu cho từng bản đồ 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ế của thẻ mô-đun blog, hãy chắc chắn rằng bạn có ít nhất 12 bài viết đã được tạo ra với một hình ảnh trong hộp.

Khi thư 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 phần chuẩn:

Nhấp để thay đổi cài đặt của mô-đun Blog. Trong Cài đặt chung, hãy thay đổi các cài đặt sau:

  • Giao diện: Lưới (Grid)
  • Số bài viết: 12
  • Hiển thị hình ảnh trong đầu: YES
  • Nút Read more: ON

Trong CSS tùy chỉnh, nhập "gridcard" vào hộp văn bản ID CSS. Đâ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ả giá đắt cho những gì bạn có thể tự làm. [Miễn phí]

Các thẻ bài đăng trên 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 phải đếm 1 để 4 trên mỗi chiều dài từ trên xuống dưới:

Vì bạn biết số thứ tự của mỗi thẻ blog trong mỗi cột, bạn cũng có thể xác định từng thẻ dưới dạng 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ô

Đố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ẻ của mô-đun blog (thẻ 1 và 3) trong cột đầu tiên cho chúng màu nền tối màu xá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 có ID 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 yếu tố văn bản trong thẻ mô-đun của blog (bao gồm tiêu đề, bài viết metas, liên kết meta bài viết và nội dung bài viết) và gán cho họ màu trắng.

Đây là kết quả:

Bạn đang tìm kiếm các chủ đề và plugin WordPress tốt nhất?

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

Bước tiếp theo trong việc tạo bố trí rô của chúng tôi là nhắm mục tiêu các thẻ được đánh số lẻ vào cột thứ ba và áp dụng nền màu xám đậm 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ử "con cuối cùng" giả.

Đối với cột thứ hai (hoặc giữa), nhắm mục tiêu các thẻ còn lại để 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 thẻ mô-đun blog, bạn có thể thay đổi một trong các yếu tố bên trong thẻ 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 lơ lửng trên 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 để mã 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 vào thẻ để khi bạn di chuột qua thẻ trắng, chúng trở thành 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 phải nhắm mục tiêu tất cả các thẻ ngay cả trong mỗi cột. Vào chủ đề "Divi → Options" và chắc chắn rằng bạn vô hiệu hóa hoặc xóa bất kỳ mã CSS trước đó mà bạn đã thêm từ đầu của 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ể. Để thực hiện việc này, bạn cần phải tìm ID của mục 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.

Truy cập 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 kết thúc tốt đẹp 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 sau 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 WooC Commerce 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. [Khuyến nghị]

Để 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ả!

Suy nghĩ cuối cùng

Đâ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 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ữ cùng một kiểu cho mỗi thẻ. Bạn có thể thiết kế chúng như 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.

Hướng dẫn Divi khác

Bài viết này chứa comments 18
  1. 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

  2. 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 đó thay đổi khi bạn chuyển sang di động và màu sắc không còn được liên kết với các bài đăng đúng
    Bất cứ ai có một ý tưởng ở đây?

  3. 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.
    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 ở giữa đẹp không?

    En vous remerciant.
    Sophie

    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. ust escribeió un artículo mal escrito, debería ser: artículo del primer Hijo: no 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:

  4. 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 được hiển thị lớn ở đầu 'bài báo. 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 màn hình bài viết.
    Merci
    Patrick

  5. Bonjourn, bài báo siêu
    Tôi thử vận ​​may của mình ở đây, đôi khi, chúng tôi lượn quanh một chủ đề trong nhiều tuần liền mà không tìm thấy câu trả lời khi cùng một chủ đề có ý nghĩa với những người khác.

    Vì vậy, tôi đang tìm giải pháp để thiết lập một lưới bài, chỉ bao gồm các hình ảnh nhưng có độ cao khác nhau, để rõ ràng hơn, rằng một hình ảnh trong số hai hình ảnh có chiều cao gấp đôi hình ảnh bên cạnh nó.

    Một ý tưởng?

    Julien

Để 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 chỉ định bằng *

Trang web này sử dụng Akismet để giảm thư rác. Tìm hiểu thêm về cách sử dụng dữ liệu phản hồi của bạn.

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