Bạn có muốn sử dụng mô-đun Danh mục có thể lọc của Divi và bạn không biết nên chọn bố cục nào?
Mô-đun «Danh mục đầu tư có thể lọc "Để Divi cung cấp cho bạn hai tùy chọn bố cục để lựa chọn. Cả hai tùy chọn đều có lợi thế và hoạt động rất tốt cho các mục đích nhất định.
Trong bài viết này, chúng tôi sẽ so sánh bố cục toàn bộ băng thông và lưới của mô-đun này để giúp bạn quyết định những gì bạn cần cho Website.
Chúng tôi cũng sẽ tùy chỉnh cả hai bố cục để xem chúng hoạt động như thế nào trong một bố cục Divi.
Hãy bắt đầu!
khảo sát
Đầu tiên, hãy xem những gì chúng ta sẽ tạo ra trong hướng dẫn này.
Phiên bản trên máy tính để bàn của bố cục lưới
Tải DIVI ngay bây giờ !!!
Phiên bản điện thoại của bố cục lưới
Phiên bản dành cho máy tính để bàn của bố cục Full width
Đọc cũng: Divi: Cách sử dụng hiệu ứng đổ bóng và di chuột để tạo nội dung tương tác
Phiên bản điện thoại của bố cục Full width
Cách thay đổi bố cục của mô-đun danh mục đầu tư có thể lọc
Theo mặc định, mô-đun “Danh mục có thể lọc” hiển thị bố cục theo chiều rộng đầy đủ. Bạn có thể thay đổi bố cục để hiển thị các mục trong lưới. Đầu tiên, hãy mở thông số mô-đun.
Sau đó chọn tab Thiết kế. Tùy chọn đầu tiên là Bố trí. Nó có một danh sách thả xuống với một vài lựa chọn. Chọn nó để chọn giữa Chiều rộng đầy đủ et lưới.
Nếu bạn chọn tùy chọn hiện chưa được chọn, mô-đun sẽ tải lại và hiển thị các mục danh mục đầu tư trong bố cục này. Ví dụ dưới đây cho thấy bố cục lưới.
So sánh bố cục mô-đun danh mục đầu tư có thể lọc
Hai bố cục rất khác nhau, nhưng chúng có một số điểm tương đồng. Cả hai đều hiển thị bộ lọc ở đầu mô-đun, tiêu đề và thẻ meta bên dưới hình ảnh mục và phân trang ở cuối mô-đun.
Dưới đây là xem chúng khác nhau như thế nào.
Bố cục chiều rộng đầy đủ
Chiều rộng đầy đủ hiển thị một hình ảnh lớn với phần tử danh mục đầu tư chiếm toàn bộ chiều rộng của vùng danh mục đầu tư. Hình ảnh hiển thị ở dạng ban đầu và mở rộng để phù hợp với chiều rộng có sẵn.
Nó không thêm nhiều không gian giữa các mục ví. Chúng tôi khuyên bạn nên giới hạn số lượng bài đăng ở một số ít. Ví dụ dưới đây hiển thị bố cục toàn chiều rộng với 2 bài đăng.
Bố cục lưới
Bố cục Lưới hiển thị tối đa 4 mục liên tiếp. Nó bổ sung thêm không gian giữa các phần tử. Hình ảnh được cắt để tạo hình thu nhỏ có cùng kích thước bất kể kích thước và hình dạng hình ảnh.
Đối với điều này, chúng tôi giới hạn mô-đun hiển thị bốn bài đăng để hiển thị phân trang.
Khi nào sử dụng từng bố cục của mô-đun Danh mục có thể lọc
Cả hai cách sắp xếp đều có lợi thế của chúng. Dưới đây là một số mẹo về thời điểm sử dụng từng bố cục.
Bố cục chiều rộng đầy đủ
Sử dụng bố cục Fullwidth khi bạn chỉ có một vài mục để hiển thị hoặc muốn tập trung vào một vài mục.
Cũng sử dụng bố cục này khi bạn muốn làm nổi bật hoặc thu hút sự chú ý vào các hình ảnh nổi bật.
Bố cục lưới
Sử dụng bố cục Lưới khi bạn muốn hiển thị nhiều mục hoặc khi bạn muốn bố cục hiển thị nhiều mục hơn trong một không gian nhỏ hơn.
Cách tùy chỉnh bố cục mô-đun danh mục đầu tư có thể lọc
Bây giờ chúng ta đã thấy cách chọn bố cục, cách chúng hoạt động và khi nào sử dụng chúng, hãy xem cách tùy chỉnh hai bố cục này.
Chúng tôi sẽ sử dụng trang Danh mục đầu tư của Gói bố cục họa sĩ miễn phí có sẵn trong Divi. Đây là trang gốc.
Chúng tôi sẽ thay thế danh mục đầu tư bằng mô-đun Danh mục có thể lọc và sử dụng cùng hình ảnh và tiêu đề.
Chúng tôi sẽ tạo hai phiên bản: một phiên bản có bố cục toàn chiều rộng và một phiên bản có bố cục lưới.
Cách tùy chỉnh bố cục lưới của mô-đun danh mục đầu tư có thể lọc
Chúng ta sẽ bắt đầu với bố cục lưới. Tôi sẽ sử dụng màu sắc và phông chữ từ bố cục ban đầu.
Nội dung
Mở chúng ra thông số mô-đun và nhập 4 cho Số lượng bài viết. Chọn tất cả loại mà bạn muốn hiển thị trong mô-đun.
- Số bài đăng: 4
- Danh mục bao gồm: Chọn danh mục
Bố trí
Sau đó chọn tab Thiết kế và lựa chọn lưới trong các tùy chọn bố cục.
- Bố trí: Lưới
Hình ảnh
Di chuyển đến Hình ảnh và chọn tùy chọn Hộp phấn. Thay đổi nó màu bóng trong rgba (0,0,0,0.05).
- Hộp bóng: 4ème tùy chọn
- Màu bóng: rgba (0,0,0,0.05)
Văn bản
Sau đó cuộn xuống Văn bản và sửa đổi sự liên kết Ở Trung tâm. Điều này tập trung vào bộ lọc, tiêu đề, meta và phân trang.
- Căn chỉnh văn bản: Căn giữa
Văn bản tiêu đề
Sau đó cuộn xuống Tiêu đề văn bản và thay đổi các cài đặt sau.
- Phông chữ tiêu đề: Merriweather
- Màu Văn bản Tiêu đề: # 000000
Thay đổi kích thước của công an ở 26px cho máy tính để bàn, 20px cho máy tính bảng và 18px cho điện thoại.
- Kích thước văn bản tiêu đề: Máy tính để bàn 26px, máy tính bảng 20px, Điện thoại 18px
Lọc văn bản tiêu chí
Sau đó cuộn xuống Lọc văn bản tiêu chí và thay đổi các cài đặt sau:
- Tiêu chí bộ lọc:
- Phông chữ: Montserrat
- Độ đậm phông chữ: Bold
- Phong cách: TT
- Màu văn bản: # fd6927
- Kích thước văn bản: 12px
Meta text
Sau đó cuộn xuống Siêu văn bản. Thay đổi nó công an trong Montserrat và màu trong # fd6927.
- Kích thước văn bản meta: Montserrat
- Màu văn bản meta: # fd6927
Đặt kích thước trên 12 pixel,khoảng cách giữa các chữ cái trên 2 pixel và chiều cao của dòng trên 1,2 em.
- Kích thước văn bản: 12px
- Khoảng cách chữ Meta: 2px
- Chiều cao dòng Meta: 1,2 em
Phân trang văn bản
Cuối cùng, cuộn xuống Văn bản phân trang và thay đổi nó công an trong Montserrat và đặt màu phông chữ trên nền đen. Đóng mô-đun và lưu cài đặt của bạn.
- Phông chữ phân trang: Montserrat
- Màu văn bản phân trang: # 000000
Cách tùy chỉnh mô-đun danh mục đầu tư có thể lọc trong bố cục toàn chiều rộng
Bây giờ, hãy cấu hình mô-đun trong một bố cục toàn chiều rộng.
Chúng tôi sẽ sử dụng các dấu hiệu thiết kế giống như bố cục lưới, nhưng chúng tôi sẽ thực hiện một số thay đổi phù hợp với bố cục này. Chúng tôi sẽ sử dụng một số CSS đơn giản để thực hiện một số chỉnh sửa nhỏ.
Nội dung
Mở chúng ra thông số mô-đun và thay đổi số lượng ấn phẩm thành 2. Điều này giúp trang nhỏ hơn và dễ quản lý hơn với hình ảnh lớn. Chọn tất cả loại mà bạn muốn hiển thị trong mô-đun.
- Số bài đăng: 2
- Danh mục bao gồm: Chọn danh mục
Các yếu tố
Di chuyển đến Các yếu tố và vô hiệu hóa Hiển thị danh mục. Để những người khác được bật. Các danh mục sẽ vẫn được bật cho bộ lọc, nhưng chúng sẽ không hiển thị cùng với tiêu đề.
- Hiển thị danh mục: KHÔNG
Bố trí
Chọn tab Thiết kế. Dưới Bố trí, để Bố cục được đặt thành Chiều rộng đầy đủ, đó là cài đặt mặc định của nó.
- Bố cục: Toàn bộ chiều rộng
Hình ảnh
Sau đó cuộn xuống Hình ảnh . Chọn tùy chọn Hộp bóng và thay đổi nó màu bóng râm trong rgba (0,0,0,0.05).
- Hộp bóng: 4ème tùy chọn
- Màu bóng: rgba (0,0,0,0.05)
Văn bản
Sau đó cuộn xuống bản văn. Thay đổi sự liên kết Ở Trung tâm. Bộ lọc, tiêu đề và phân trang sẽ được căn giữa với hình ảnh.
- Căn chỉnh văn bản: Căn giữa
Văn bản tiêu đề
Sau đó cuộn xuống Văn bản tiêu đề . Thay đổi nó công an đến Merriweather và thay đổi màu màu đen.
- Phông chữ tiêu đề: Merriweather
- Màu Văn bản Tiêu đề: # 000000
Thay đổi kích thước của công an ở 40px cho máy tính để bàn, 20px cho máy tính bảng và 18px cho điện thoại.
- Kích thước văn bản tiêu đề: Máy tính để bàn 40px, máy tính bảng 20px, Điện thoại 18px
Lọc văn bản tiêu chí
Sau đó cuộn xuống Lọc văn bản tiêu chí và thay đổi các cài đặt sau:
- Tiêu chí bộ lọc:
- Phông chữ: Montserrat
- Độ đậm phông chữ: Bold
- Phong cách: TT
- Màu văn bản: # fd6927
Phân trang văn bản
Sau đó cuộn xuống Văn bản phân trang. Thay đổi nó công an trong Montserrat, thay đổi trọng lượng nửa đậm và đặt màu phông chữ trên # fd6927. Đóng mô-đun và lưu cài đặt của bạn.
- Phông chữ phân trang: Montserrat
- Màu: # fd6927
- Độ đậm phông chữ: Bán đậm
Văn bản tiêu đề CSS
Mở tab Nâng cao và cuộn đến Tiêu đề danh mục đầu tư. Chọn biểu tượng Màn hình nền. Sao chép mã dưới đây cho các kích thước màn hình khác nhau. Đóng mô-đun và lưu cài đặt của bạn.
Tiêu đề danh mục đầu tư:
- Máy tính để bàn
padding-bottom:40px- Máy tính bảng
padding-bottom:30px- Điện thoại
padding-bottom:20px
Résultats
Phiên bản trên máy tính để bàn của bố cục lưới
Phiên bản điện thoại của bố cục lưới
Tải DIVI ngay bây giờ !!!
Phiên bản máy tính để bàn của bố cục toàn chiều rộng
Phiên bản điện thoại của bố cục toàn chiều rộng
Tải DIVI ngay bây giờ !!!
Kết luận
Đây là hoạt động của chúng tôi bằng cách sử dụng bố cục toàn chiều rộng so với lưới trong mô-đun Danh mục đầu tư có thể lọc của Divi. Lựa chọn giữa hai tùy chọn bố trí rất dễ dàng.
Mỗi tùy chọn đều có ưu điểm và nên được thiết kế khác nhau để phù hợp với Website. Chỉ cần thực hiện một vài chỉnh sửa để đảm bảo mô-đun của bạn hoạt động tốt với bất kỳ bố cục Divi nào.
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.
...
