Bạn có muốn biết cách tùy chỉnh các thành phần lưới của mô-đun Danh mục đầu tư có thể lọc của Divi ? Thực hiện theo chúng tôi trong hướng dẫn này ...
Có một khu vực trên của bạn Website để giới thiệu công việc của bạn là quan trọng. Nếu bạn là một nhà tạo mẫu, bạn có thể tạo một số dự án trên Website WordPress để thể hiện các khái niệm của bạn. Nếu bạn là người xây dựng thương hiệu, bạn có thể sử dụng danh mục đầu tư để giới thiệu công việc của mình. Hơn nữa, chúng tôi thậm chí có thể đi xa hơn và thêm các danh mục khác nhau cho các dự án của mình. Nó ở đây mô-đun Danh mục đầu tư có thể lọc của Divi làm gì? .
Với mô-đun này, chúng tôi có thể hiển thị công việc khó khăn của mình một cách dễ dàng và có tổ chức.
Trong hướng dẫn hôm nay, chúng ta sẽ tùy chỉnh các thành phần lưới riêng lẻ của mô-đun Danh mục đầu tư có thể lọc. Chúng tôi sẽ sử dụng bố cục từ các gói bố cục miễn phí Hội nghị Divi et Huấn luyện viên Yoga trực tuyến Divi được cung cấp với mỗi lần mua Divi .
Như với tất cả mọi thứ về Divi, chúng tôi có khả năng tùy chỉnh mô-đun này cho phù hợp với nhu cầu và mong muốn của mình. Tuy nhiên, trước khi bắt đầu tạo kiểu, hãy tìm hiểu thêm một chút về mô-đun.
Mô-đun Danh mục đầu tư có thể lọc của Divi là gì?
Dự án là một phần của loại bài đăng tùy chỉnh hoạt động giống như bài đăng. Bạn có thể tìm thấy chúng trong bảng điều khiển WordPress của mình.
Đây là nơi bạn sẽ tạo các dự án riêng lẻ sẽ đưa vào mô-đun Danh mục đầu tư có thể lọc của bạn. Mô-đun cung cấp cho chúng tôi hai cách để hiển thị các dự án của chúng tôi: ở dạng lưới ou ở định dạng toàn chiều rộng. Đối với chúng tôi, chúng tôi sẽ sử dụng và tùy chỉnh định dạng lưới.
Với mô-đun Danh mục đầu tư có thể lọc, chúng tôi sẽ có thể trình bày các dự án gần đây nhất của mình. Người dùng trang web của chúng tôi sẽ thấy một thanh bộ lọc ở đầu lưới danh mục đầu tư của chúng tôi. Từ đó, họ có thể duyệt qua các danh mục danh mục đầu tư khác nhau mà chúng tôi cho phép hiển thị trong mô-đun.
Dưới đây là một ví dụ về cấu hình lưới của mô-đun với một số dự án mẫu:
Các lĩnh vực cần xem xét khi tạo danh mục đầu tư có thể lọc của Divi
Giống như tất cả các chế độ Divi, mô-đun Danh mục đầu tư có thể lọc đi kèm với một số tính năng mà chúng tôi có thể tùy chỉnh theo nhu cầu và mong muốn của mình. Do đó, hầu hết các tính năng đi kèm với mô-đun đều có thể được sửa đổi trong tab Thiết kế từ phương thức cài đặt mô-đun. Chúng tôi có thể chỉnh sửa các khu vực sau và hơn thế nữa:
- Tên dự án
- hạng mục dự án
- In màu
- Lọc văn bản
- Hình thu nhỏ khi di chuột
- Sự đánh số trang
Đây không phải là danh sách đầy đủ và chúng tôi thậm chí còn chưa bắt đầu nói về cách CSS thêm các tùy chỉnh sâu hơn vào mô-đun này!
Cách chúng tôi tùy chỉnh mô-đun Danh mục đầu tư có thể lọc của Divi
Như đã đề cập trước đó, đối với hướng dẫn này, chúng tôi sẽ sử dụng hai bố cục: Hội nghị Divi et Huấn luyện viên Yoga trực tuyến Divi. Dưới đây bạn có thể xem tổng quan về công việc chúng ta sẽ làm trong hướng dẫn này.
Sắp xếp các yếu tố của bố cục "Hội nghị Divi"
Sắp xếp các yếu tố của bố cục "Divi Online Yoga Instructor"
Bạn có thể dễ dàng tải xuống cả hai bố cục từ Divi Người xây dựng.
Bây giờ, hãy bắt đâù!
Xem thêm: Divi: Chọn giữa bố cục lưới và toàn chiều rộng của mô-đun Danh mục có thể lọc
Tùy chỉnh mô-đun Danh mục đầu tư có thể lọc của Divi: "Divi Conference Edition"
Trước tiên, chúng ta sẽ cần cài đặt mẫu trang sự kiện từ Gói Bố cục Hội nghị Divi. Sau khi tạo trang mới của bạn trong WordPress và kích hoạt Trình tạo Divi, chúng tôi sẽ vào Thư viện Divi.
Nhập Thư viện Bố cục Divi
Bấm vào biểu tượng « Tải từ Thư viện để vào Thư viện bố cục Divi
Định vị bố cục trong Thư viện bố cục Divi
Sử dụng chức năng tìm kiếm trong thư viện bố cục của Divi, Tìm kiếm bố trí " Trang sự kiện hội nghị".
Cài đặt bố cục
Khi bạn đã chọn bố cục, hãy nhấp vào nút " Sử dụng bố cục này để cài đặt bố cục vào trang của bạn.
Xóa và thay thế mô-đun hình ảnh
Chúng tôi sẽ xóa mô-đun Hình ảnh được hiển thị bên dưới để nhường chỗ cho mô-đun Danh mục đầu tư có thể lọc mà chúng tôi sẽ tùy chỉnh. Bấm vào " Xóa bỏ sau khi di chuột vào ảnh để xóa ảnh.
Chèn mô-đun Danh mục đầu tư có thể lọc của Divi
Khi mô-đun Hình ảnh bị xóa, giờ đây chúng ta có thể nhường chỗ cho mô-đun Danh mục đầu tư có thể lọc. Chúng tôi sẽ nhấp vào biểu tượng “ Thêm mô-đun (dấu cộng màu xám), sau đó chọn mô-đun trong hộp mô-đun mô-đun xuất hiện.
Đặt số lượng bài đăng và bố cục danh mục đầu tư
Theo mặc định, mô-đun này sẽ trình bày công việc của bạn trong một cột. Tuy nhiên, chúng tôi sẽ sử dụng bố cục lưới theo mặc định với 4 cột.
Do đó, chúng tôi khuyên bạn nên chọn bội số của 4 (4, 8, 12, 16, v.v.) làm số lượng bài đăng cho danh mục đầu tư của mình.
Đối với hướng dẫn này, chúng tôi sẽ sử dụng 12 dự án trong lưới của chúng tôi.
Bắt đầu tùy chỉnh danh mục có thể lọc của Divi: Tiêu đề và Meta Text
Bây giờ các dự án của chúng ta được hiển thị trong một lưới, hãy liên kết một số yếu tố thiết kế của mẫu đã chọn của chúng ta. Trong trường hợp này, chúng tôi sẽ sử dụng kiểu được cung cấp cùng với Gói bố cục hội nghị Divi trong mô-đun mới của chúng tôi.
Phong cách văn bản
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: Tối
Kiểu văn bản tiêu đề
- Mức tiêu đề tiêu đề: H2
- Phông chữ tiêu đề : Krona One
- Màu văn bản: # 000000
Kiểu văn bản meta
- Phông chữ Meta: Mặc định (Mở Sans)
- Màu văn bản Meta: #ff6651
Bây giờ chúng ta đã có kiểu dáng cho các tiêu đề trong lưới danh mục đầu tư, hãy thực hiện một số thay đổi đối với hình dạng thực tế của chính các hình thu nhỏ của dự án.
Thay đổi đường viền hình thu nhỏ của dự án và các góc tròn
Trong gói Bố cục Hội nghị Divi của chúng tôi, chúng tôi sử dụng sự kết hợp độc đáo của các góc bo tròn để tạo hình dạng độc đáo cho một số khung hình chính trong gói. Hãy áp dụng phong cách này cho các hình thu nhỏ của mô-đun của chúng ta.
Hình ảnh
- Hình ảnh:
- Góc bo tròn: 50px 50px 50px 0px
- Kiểu viền: tất cả
- Chiều rộng đường viền: 3px
- Màu: # 000000
- Kiểu viền: rắn
Điều này sẽ cung cấp cho hình thu nhỏ của chúng tôi một hình dạng phù hợp với phần còn lại của các hình ảnh khác trong gói bố cục.
Tùy chỉnh lớp phủ di chuột
Hãy tiến thêm một bước với kiểu dáng của chúng ta và thực hiện một thay đổi nhỏ đối với lớp phủ mặc định đi kèm với mô-đun này. Chúng tôi sẽ thay đổi màu sắc cũng như biểu tượng được sử dụng ngay lập tức.
Chồng chất
- Màu biểu tượng thu phóng: #bcf5fd
- Màu lớp phủ di chuột: #ff6651
- Bộ chọn biểu tượng di chuột: Thu phóng
Như bạn có thể thấy bây giờ, chúng tôi đã thêm màu thương hiệu cho bố cục này vào lớp phủ, cũng như thay đổi biểu tượng mà Divi cung cấp theo mặc định cho tính năng lớp phủ khi di chuột trong mô-đun này.
Tùy chỉnh phân trang
Bây giờ chúng ta sẽ bắt đầu sử dụng các đoạn CSS nhỏ để thêm tùy chỉnh bổ sung vào mô-đun Danh mục đầu tư có thể lọc của chúng ta. Đầu tiên, chúng tôi sẽ tùy chỉnh phân trang của mô-đun này. Tiếp theo, chúng ta sẽ xóa đường viền xuất hiện phía trên nó bằng một dòng CSS
Phân trang văn bản
- Phân trang:
- Phông chữ: Krona One
- Căn chỉnh văn bản: căn giữa
- Màu văn bản: #ff6651, #000000 (Di chuột)
Đối với CSS của chúng tôi, chúng tôi sẽ chuyển sang tab Nâng cao của mô-đun của chúng tôi. Thứ hai, chúng tôi sẽ nhấp vào tab CSS tùy chỉnh. Tiếp theo, chúng ta sẽ nhập đoạn mã sau để xóa đường viền phía trên phần phân trang của chúng ta, giúp nó trông gọn gàng hơn.
phân trang danh mục đầu tư
border-top: 0px;
Sử dụng Cài đặt Divi và CSS để Tùy chỉnh Văn bản Bộ lọc
Đối với văn bản bộ lọc, chúng tôi sẽ nâng cấp nó lên một bậc. Chúng tôi sẽ sử dụng CSS để thay đổi nền cũng như các hiệu ứng di chuột.
Chúng tôi muốn có sự liên tục hoàn hảo giữa mô-đun mới được thêm vào và phong cách của gói bố cục. Trước tiên, hãy nhập cài đặt Divi cho phông chữ.
Văn bản tiêu chí lọc
- Tiêu chí bộ lọc:
- Phông chữ: Krona One
- Màu phông chữ: #ffffff, #000000 (Di chuột)
Như hiện tại, bộ lọc của chúng tôi dường như đã biến mất. Thật vậy, ở trạng thái mặc định, nó là văn bản màu trắng trên nền trắng. Tuy nhiên, chúng tôi sẽ thay đổi điều này bằng CSS tùy chỉnh ở hai vị trí.
Đầu tiên, chúng ta sẽ thêm một đoạn mã CSS trong cài đặt trang sẽ thêm nền vào văn bản bộ lọc. Thứ hai, chúng tôi sẽ tùy chỉnh bộ lọc danh mục đầu tư đang hoạt động bằng cách sử dụng tab Nâng cao môđun du.
Truy cập vào cài đặt trang, nhấp vào ba dấu chấm ở giữa màn hình. sau đó chọn biểu tượng bánh răng sẽ mở cài đặt trang. Sau đó, bạn điều hướng đến tab CSS tùy chỉnh và nhập thông tin sau để thêm nền vào văn bản bộ lọc.
CSS tùy chỉnh
Trong đoạn mã CSS này, chúng tôi đang nhắm mục tiêu màu nền của bộ lọc. Chúng tôi cũng nhắm mục tiêu và tạo kiểu cho trạng thái di chuột của nó. Tiếp theo trong chương trình nghị sự, hãy thêm một số CSS nữa vào mô-đun và đánh dấu tab Bộ lọc Hoạt động của chúng ta.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: #000000;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
}
Kiểu tab hoạt động của bộ lọc danh mục đầu tư
Tab hoạt động của fbộ lọc danh mục đầu tư thu hút sự chú ý của người dùng đến danh mục danh mục đầu tư hiện tại mà họ đang truy cập. Hiện bộ lọc này có chữ màu trắng và nền sáng.
Chúng tôi sẽ đi đến tab Nâng cao của mô-đun Danh mục đầu tư có thể lọc và thêm văn bản vào trạng thái di chuột và mặc định của tính năng này. Dưới đây là các thuộc tính CSS mà chúng tôi sẽ thêm vào ở trạng thái mặc định:
background: #ff6651;
color: #ffffff !important;
Trạng thái khi di chuột
Khi di chuột, chúng tôi sẽ thay đổi nền thành màu đen.
color: #000000!important;
Cái nhìn cuối cùng về thiết kế danh mục đầu tư có thể lọc của Divi với "Divi Conference"
Đây là cái nhìn cuối cùng!
Và bây giờ, đây là giao diện khi bạn di chuột!
Tùy chỉnh mô-đun Danh mục đầu tư có thể lọc của Divi: "Người hướng dẫn Yoga trực tuyến trên Divi"
Cũng giống như Phiên bản Hội nghị Divi, hãy tìm bố cục của bạn trong Gói bố cục dành cho người hướng dẫn Yoga trực tuyến bên trong Divi Builder.
Chúng tôi sẽ sử dụng Bố cục Trang đích cho hướng dẫn này. Cuộn xuống phần Hạng mục với tiêu đề Phần Tất cả các lớp sắp tới.
Chèn mô-đun Danh mục đầu tư có thể lọc
Từ đây, chúng tôi sẽ loại bỏ các hàng với các lớp. Nhấp vào biểu tượng màu tím có ba dấu chấm trên đó . Sau đó, chọn chế độ xem wireframe. Cuối cùng, bạn sẽ xóa hai hàng chứa ba cột.
Sau đó, chúng tôi sẽ thay thế chúng bằng một cột duy nhất trong hàng bên trong. Sau đó, chúng tôi sẽ thêm mô-đun Danh mục đầu tư có thể lọc.
Như trong ví dụ trước, chúng tôi sẽ sử dụng bố cục dạng lưới cho mô-đun này với bội số của 4 cho số lượng bài đăng.
Bây giờ, hãy làm điều gì đó hơi khác một chút với thông tin mà chúng ta trình bày trên bản đồ.
Trong tab Nội dung, hướng đến Các yếu tố và bỏ chọn Hiển thị danh mục . Điều này có nghĩa là mô-đun Danh mục đầu tư sẽ chỉ hiển thị tên của dự án mà không có tên của danh mục mà nó nằm trong đó.
Tùy chỉnh văn bản tiêu chí bộ lọc, tiêu đề dự án và văn bản phân trang
Hãy xác định kiểu cơ sở cho các phần văn bản của mô-đun của chúng ta. Nội dung văn bản của bố cục này là Mở Sans và phông chữ được sử dụng cho các tiêu đề chính là cái đục. Do đó, chúng tôi sẽ sử dụng kết hợp hai phông chữ này trong suốt quá trình tạo kiểu.
Văn bản
- Căn chỉnh văn bản: Căn giữa
- Màu văn bản: Ánh sáng
Văn bản tiêu đề
- Phông chữ tiêu đề : Cinzel
- Màu văn bản tiêu đề: #ffffff
Văn bản tiêu chí lọc
- Tiêu chí lọc Trọng lượng phông chữ: Đậm
- Màu văn bản Tiêu chí lọc: #ffffff
Phân trang văn bản
- Trọng lượng phông chữ phân trang: Đậm
Đây là giao diện của mô-đun danh mục đầu tư có thể lọc của chúng tôi ngay bây giờ. Nó không nhiều, nhưng chúng ta đang đến đó từ từ!
Tạo lớp phủ di chuột mờ
Hãy lấy cảm hứng từ các mô-đun khác nhau và độ dốc đẹp mắt trong bố cục này. Đối với điều này, chúng tôi sẽ tạo lớp phủ di chuột mờ và tùy chỉnh biểu tượng cũng xuất hiện khi di chuột.
- Màu biểu tượng thu phóng: #323741
- Màu lớp phủ di chuột: rgba (255 201 165, 0,85)
- Bộ chọn biểu tượng di chuột: tìm kiếm một trang tính và xem biểu tượng ở trên
Thêm đường viền vào các phần tử lưới danh mục đầu tư bằng CSS tùy chỉnh
Tương tự như ví dụ đầu tiên của chúng tôi, bây giờ chúng tôi sẽ sử dụng CSS để thêm nhiều sở thích hơn vào mô-đun Danh mục đầu tư có thể lọc của chúng tôi.
Bây giờ, chúng ta sẽ thêm đường viền xung quanh từng mục riêng lẻ trong lưới danh mục đầu tư. Sử dụng đoạn mã CSS bên dưới trong phần CSS tùy chỉnh của cài đặt trang để thêm đường viền của chúng tôi.
Chúng tôi cũng sẽ sử dụng “đường viền” làm lớp CSS cho mô-đun này.
- Lớp CSS: đường viền
CSS tùy chỉnh
/* Border */
.border .et_pb_grid_item {
border: 2px solid #ffffff;
padding: 5px;
}
Ở đây, chúng ta hiện có mô-đun Danh mục đầu tư có thể lọc với đường viền đẹp mắt – và phần đệm – xung quanh mỗi mục lưới.
Đã thêm CSS vào đường viền phân trang kiểu
Không giống như ví dụ trước của chúng ta, hãy thêm màu vào đường viền của phân trang bằng CSS. Điều này cũng sẽ đi vào khu vực Cài đặt > Trang CSS tùy chỉnh .
/* Pagination Styling */
.et_pb_filterable_portfolio .et_pb_portofolio_pagination {
border-top: 2px solid #adc6d9;
}Tiêu chí lọc kiểu văn bản
Tương tự như phong cách của mô-đun Danh mục đầu tư hội nghị Divi của chúng tôi, chúng tôi muốn thêm nhạc jazz vào bộ lọc danh mục của mình. Một lần nữa, chúng tôi muốn vẽ từ phong cách đã có trong mẫu được cung cấp cho chúng tôi.
Đây là CSS mà chúng tôi sẽ thêm vào phần CSS tùy chỉnh của mình để nhắm mục tiêu vào nền và di chuột qua thanh bộ lọc của chúng tôi.
/* Change background color of filters */
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a {
background: none;
}
.et_pb_filterable_portfolio .et_pb_portfolio_filters li a:hover {
background: #ffffff;
color: #323741 !important;
}Với hai bổ sung mới này cho CSS tùy chỉnh của chúng tôi, đây là mô-đun Danh mục đầu tư có thể lọc của chúng tôi đang định hình trông như thế nào.
Tuy nhiên, hãy lưu ý cách bộ lọc danh mục đầu tư đang hoạt động bị mất. Nó luôn có nền sáng với chữ màu trắng trên đó. Hãy chuyển đến cài đặt mô-đun và thêm một số CSS để thay đổi điều đó.
CSS tùy chỉnh
Bộ lọc danh mục hoạt động:
background: #ffffff;
color: #323741 !important;
Xóa hoạt ảnh mô-đun
Để cung cấp trải nghiệm rõ ràng hơn, chúng tôi sẽ xóa hoạt ảnh mặc định đi kèm với mô-đun Danh mục đầu tư có thể lọc. Đối với điều này, trước tiên chúng tôi cần quay lại cài đặt trang của mình và thêm một số CSS sẽ nhắm mục tiêu các thành phần lưới danh mục đầu tư và xóa chuyển tiếp trượt điều đó xảy ra ngoài hộp.
CSS tùy chỉnh
/* Remove transition */
.et_pb_filterable_portfolio .et_pb_portfolio_item.active {
transition: none;
}
</code><code>
.et_pb_portfolio_item {
animation: none!important;
transition: none !important;
}Đọc cũng: Divi: Cách thay đổi số cột trong Blog
Thay đổi lưới danh mục đầu tư từ bốn cột thành ba
Phần bổ sung CSS mới nhất của chúng tôi sẽ chuyển đổi mô-đun Danh mục đầu tư có thể lọc từ bốn cột thành ba cột. Điều này sẽ cung cấp cho chúng tôi nhiều chỗ hơn để xem các dự án của chúng tôi.
Ngoài ra, chúng tôi sẽ thêm một dòng bổ sung vào mô-đun của chúng tôi. Bạn cũng sẽ tìm thấy đoạn mã CSS mới nhất mà bạn có thể sử dụng để chuyển đổi các cột của mình.
CSS tùy chỉnh
Đối với đoạn mã cuối cùng này, chúng tôi sẽ thêm CSS ID #ba-cột-lưới đến mô-đun của chúng tôi. Chúng tôi sẽ vẫn giữ nguyên lớp CSS của chúng tôi từ trước.
/* 4 to 3 Columns */
@media only screen and ( min-width: 768px ) {
#three-column-grid .et_pb_grid_item {
width: 28.333%;
margin: 0 7.5% 7.5% 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n) {
margin-right: 0;
}
#three-column-grid .et_pb_grid_item:nth-child(3n+1) {
clear: left;
}
#three-column-grid .et_pb_grid_item:nth-child(4n+1) {
clear: unset;
}
}
Tải DIVI ngay bây giờ !!!
Kết luận
Như với hầu hết các mô-đun Divi, cài đặt đi kèm với Divi có thể được phát triển thêm bằng CSS. Trưng bày tác phẩm của bạn là một phần quan trọng trong việc điều hành một doanh nghiệp, blog hoặc thương hiệu trực tuyến.
Như vậy, có một cách có tổ chức để hiển thị công việc của bạn là điều cần thiết. Kiếm các mẹo đã được chia sẻ hôm nay để tham gia vào hành trình thiết kế mô-đun Danh mục đầu tư có thể lọc của Divi của riêng bạn.
Hy vọng rằng kỹ thuật này sẽ bổ sung một kỹ năng thiết kế hữu ích khác cho các dự án trong tương lai.
Chúng tôi hy vọng hướng dẫn này sẽ truyền cảm hứng cho bạn cho các dự án Divi tiếp theo của bạn. Nếu bạn có bất kỳ mối quan tâm hoặc đề xuất nào, hãy tìm chúng tôi trong phần bình luận để thảo luận về nó.
Bạn cũng có thể tham khảo tài nguyên của chúng tôi, nếu bạn cần nhiều yếu tố hơn để thực hiện các dự án tạo trang web Internet của mình.
Đừng ngần ngại cũng 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.
...
