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

Hướng dẫn Divi: Cách sử dụng mô-đun ví với bộ lọc

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 danh mục toàn bộ chủ đề Divi hoạt động giống như mô-đun ví thông thường, ngoại trừ việc nó hiển thị dự án của bạn ở chế độ Fullwdth tuyệt đẹp. Nó cũng đi kèm với một số tính năng độc đáo mới: Grid và Carousel. Mô-đun hoạt động bằng cách hiển thị danh sách các dự án gần đây nhất của bạn và có thể được sử dụng bởi các nhà thiết kế và nghệ sĩ muốn hiển thị một bộ sưu tập các tác phẩm gần đây nhất của họ.

đầy đủ chiều rộng porfolio module divi.png

Cách thêm mô-đun Danh mục đầu tư đầy đủ vào trang của bạn

Trước khi bạn có thể thêm một mô-đun danh mục đầu tư đầy đủ vào trang của mình, trước tiên bạn phải nhảy vào Divi Builder. Sau khi chủ đề Divi được cài đặt trên trang web của bạn, bạn sẽ thấy một nút Sử dụng Divi Builder phía trên nhà xuất bản mỗi khi bạn tạo trang mới. Nhấn nút này để kích hoạt Divi Builder và truy cập tất cả các module Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo trong chế độ trực quan. Bạn cũng có thể nhấp vào nút Sử dụng Visual Builder khi bạn duyệt trang web của mình ở nền trước nếu bạn được kết nối với trang tổng quan WordPress của mình.

divi builder

Khi bạn đã nhập Visual Builder, bạn có thể nhấp vào nút cộng màu xám để thêm mô-đun mới vào trang của mình. Các mô-đun mới chỉ có thể được thêm vào bên trong các dòng. Nếu bạn bắt đầu một trang mới, đừng quên thêm một dòng vào trang của bạn trước. Chúng tôi có các hướng dẫn tuyệt vời về việc sử dụng các yếu tố dòng và phần Divi.

filterable port.png

Xác định vị trí các module danh mục đầu tư có thể lọc trong danh sách module và bấm để thêm nó vào trang của bạn. Danh sách các module có sẵn, có nghĩa là bạn có thể gõ từ "danh mục đầu tư có thể lọc", sau đó bấm vào nút "Enter" để tìm kiếm và tự động thêm các module danh mục đầu tư có thể lọc. Sau khi thêm các module, bạn sẽ được chào đón bởi danh sách tùy chọn mô-đun. Các tùy chọn này được chia thành ba nhóm chính: Nội dung , Conception et tiên tiến.

Ví dụ về trường hợp sử dụng: Thêm mô-đun danh mục đầu tư có thể lọc vào trang danh mục đầu tư

Trong ví dụ này, tôi sẽ chỉ cho bạn cách trình bày danh mục đầu tư trên trang danh mục đầu tư bao gồm toàn bộ chiều rộng của trang.

danh mục đầu tư trên toàn bộ trang divi.jpg

Chúng ta hãy bắt đầu.

Sử dụng hàm tạo hình ảnh để thêm phần Fullwidth bên dưới tiêu đề trang. Sau đó, thêm một mô-đun danh mục đầu lọc có thể lọc.

thêm danh mục đầu tư có thể lọc divi.jpg

Cập nhật cài đặt danh mục có thể lọc như sau:

Tùy chọn nội dung

Số bài viết: 8 Hiển thị số trang: NO

Tùy chọn thiết kế

Giao diện: Lưới Phóng to biểu tượng color: # 000000 phục hồi Hover Màu sắc: # ffffff Font tiêu đề: Theo mặc định, đậm, chữ in hoa kích thước Tiêu đề Font: kích thước 14px Tiêu đề Spacing chữ 1px Meta Font: 12px Meta Spacing chữ cái: 1px

mô-đun danh mục đầu tư có thể lọc divi.png

Đó là tất cả!

Tùy chọn nội dung mô-đun danh mục đầu tư

Trong tab nội dung, bạn sẽ tìm thấy tất cả các phần tử nội dung của mô-đun, chẳng hạn như văn bản, hình ảnh và biểu tượng. Tất cả các điều khiển đó cái gì xuất hiện trong mô-đun của bạn sẽ luôn được tìm thấy trong tab này.

mô-đun danh mục đầu tư có thể lọc divi content section.png

Danh hiệu đầu tư

Nhập tiêu đề được hiển thị phía trên danh mục đầu tư hoặc để trống tiêu đề để bạn không sử dụng tiêu đề.

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í]

Bao gồm danh mục

Chọn các danh mục bạn muốn hiển thị. Các dự án từ các danh mục không được chọn sẽ không xuất hiện trong danh sách dự án.

Số lượng tin nhắn

Kiểm tra số lượng các dự án được hiển thị Để trống hoặc sử dụng 0 để tránh giới hạn số lượng.

Hiển thị tiêu đề

Chọn xem tiêu đề của từng dự án có được hiển thị hay không khi bạn di chuột qua mục dự án.

Hiển thị ngày

Chọn xem ngày xuất bản của từng dự án có được hiển thị hay không khi bạn di chuột qua mục dự án.

Màu nền

Đặt màu nền tùy chỉnh cho mô-đun của bạn hoặc để trống để sử dụng màu mặc định.

Hình nền

Nếu được đặt, hình ảnh này sẽ được sử dụng làm nền cho mô-đun này. Để xóa hình nền, chỉ cần xóa URL khỏi trường cài đặt. Hình nền sẽ xuất hiện phía trên các màu nền, có nghĩa là màu nền sẽ không hiển thị khi áp dụng hình nền.

Nhãn quản trị

Điều này sẽ thay đổi nhãn mô-đun trong hàm tạo để dễ nhận dạng. Khi bạn sử dụng khung nhìn WireFrame trong Visual Builder, các nhãn này xuất hiện trong khối mô-đun của giao diện Divi Builder.

Tùy chọn thiết kế ví rộng toàn bộ

Trong tab Thiết kế, bạn sẽ tìm thấy tất cả các tùy chọn kiểu của mô-đun, chẳng hạn như phông chữ, màu sắc, kích thước và khoảng trắng. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun. Mỗi mô-đun Divi có một danh sách dài các thông số thiết kế mà bạn có thể sử dụng để thay đổi bất cứ điều gì.

design module divi.png

Bố trí

Chọn bố cục bạn muốn sử dụng. "Lưới" sẽ hiển thị tất cả các thành phần của bạn trong bố cục nhiều cột và nhiều hàng. Băng chuyền hiển thị các mục của bạn trong một hàng hình ảnh lát gạch trượt để hiển thị các mục bổ sung trong danh sách.

Biểu tượng màu thu phóng

Khi di chuột qua một mục trong mô-đun ví, biểu tượng lớp phủ sẽ xuất hiện. Bạn có thể điều chỉnh màu được sử dụng từ biểu tượng này bằng cách sử dụng công cụ chọn màu trong cài đặt này.

Lớp phủ màu di chuột

Khi bạn di chuột qua một mục trong mô-đun danh mục đầu tư, màu lớp phủ sẽ xuất hiện ở đầu hình ảnh và bên dưới biểu tượng văn bản và tiêu đề của danh mục đầu tư. Theo mặc định, màu trắng bán trong suốt được sử dụng. Nếu bạn muốn sử dụng màu khác, bạn có thể điều chỉnh màu bằng bộ chọn màu trong cài đặt này

Công cụ chọn biểu tượng di chuột

Tại đây bạn có thể chọn biểu tượng tùy chỉnh để hiển thị khi khách truy cập di chuyển qua các mục danh mục đầu tư trong mô-đun.

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]

Màu văn bản

Ở đây bạn có thể chọn xem văn bản của mình có sáng hay tối không.

tùy chọn thiết kế mô-đun danh mục đầu lọc có thể lọc divi.png

Phông chữ tiêu đề

Bạn có thể thay đổi phông chữ của văn bản tiêu đề bằng cách chọn phông chữ mong muốn từ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, chữ hoa và gạch chân.

Kích thước phông chữ tiêu đề

Ở đây bạn có thể điều chỉnh kích thước của văn bản tiêu đề của bạn. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc nhập giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập ở bên phải thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Màu văn bản tiêu đề

Theo mặc định, tất cả các màu văn bản Divi xuất hiện bằng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của văn bản tiêu đề, hãy chọn màu mong muốn trong bộ chọn màu bằng cách sử dụng tùy chọn này.

Khoảng cách của các chữ cái đầu

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái trong văn bản tiêu đề, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao của dòng tiêu đề

Chiều cao dòng ảnh hưởng đến khoảng trống giữa mỗi dòng văn bản tiêu đề Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập nằm ở bên phải của con trỏ. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

danh mục đầu tư lọc divi module metadonnee.png

Phông chữ meta

Bạn có thể thay đổi phông chữ của văn bản meta bằng cách chọn phông chữ mong muốn từ trình đơn thả xuống. Divi đi kèm với hàng tá phông chữ lớn được hỗ trợ bởi Google Fonts. Theo mặc định, Divi sử dụng phông chữ Open Sans cho tất cả văn bản trên trang của bạn. Bạn cũng có thể tùy chỉnh kiểu văn bản của mình bằng cách sử dụng các tùy chọn in đậm, in nghiêng, chữ hoa và gạch chân.

Kích thước phông chữ Metas

Tại đây bạn có thể điều chỉnh kích thước của siêu văn bản. Bạn có thể kéo thanh trượt phạm vi để tăng hoặc giảm kích thước văn bản hoặc nhập giá trị của kích thước văn bản mong muốn trực tiếp vào trường nhập ở bên phải thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Màu văn bản meta

Theo mặc định, tất cả các màu văn bản Divi xuất hiện bằng màu trắng hoặc xám đậm. Nếu bạn muốn thay đổi màu của siêu văn bản, hãy chọn màu mong muốn trong bộ chọn màu bằng cách sử dụng tùy chọn này.

Giãn cách Meta Letter

Khoảng cách giữa các chữ cái ảnh hưởng đến khoảng trống giữa mỗi chữ cái. Nếu bạn muốn tăng khoảng cách giữa mỗi chữ cái của siêu văn bản, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập ở bên phải của thanh trượt. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Chiều cao dòng Meta

Chiều cao dòng ảnh hưởng đến khoảng trống giữa mỗi dòng của siêu văn bản Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng trắng hoặc nhập kích thước khoảng cách mong muốn trong trường nhập nằm ở bên phải của con trỏ. Các trường nhập hỗ trợ các đơn vị đo lường khác nhau, có nghĩa là bạn có thể nhập "px" hoặc "em" tùy thuộc vào giá trị của kích thước của bạn để thay đổi loại đơn vị của nó.

Sử dụng đường viền

Bật tùy chọn này sẽ đặt đường viền xung quanh mô-đun của bạn. Đường viền này có thể được tùy chỉnh bằng các tham số có điều kiện sau.

Màu của đường viền

Tùy chọn này ảnh hưởng đến màu của đường viền của bạn. Chọn màu tùy chỉnh trong bộ chọn màu để áp dụng màu đó cho đường viền của bạn.

Chiều rộng của đường viền

Theo mặc định, đường viền có chiều rộng là 1 pixel. Bạn có thể tăng giá trị này bằng cách kéo thanh trượt phạm vi hoặc nhập giá trị tùy chỉnh vào trường nhập ở bên phải thanh trượt. Đơn vị đo lường tùy chỉnh được hỗ trợ, có nghĩa là bạn có thể thay đổi đơn vị mặc định là "px" thành đơn vị khác, như em, vh, vw, v.v.

Kiểu viền

Biên giới hỗ trợ tám phong cách khác nhau: rắn, chấm, chấm, đôi, rãnh, đỉnh, inlay và bắt đầu. Chọn kiểu mong muốn của bạn từ trình đơn thả xuống để áp dụng cho đường viền của bạn.

Tùy chọn danh mục đầu tư nâng cao

Trong tab nâng cao, bạn sẽ tìm thấy các tùy chọn mà các nhà thiết kế web có kinh nghiệm hơn có thể thấy hữu ích, chẳng hạn như các thuộc tính CSS và HTML tùy chỉnh. Ở đây bạn có thể áp dụng CSS tùy chỉnh cho một trong nhiều thành phần của mô-đun. Bạn cũng có thể áp dụng các lớp tùy chỉnh và ID CSS cho mô-đun, có thể được sử dụng để tùy chỉnh mô-đun trong tệp style.css của chủ đề con của bạn.

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ị]

phần mô đun danh mục đầu tư có thể lọc divi

ID CSS

Nhập mã định danh CSS tùy chọn để sử dụng cho mô-đun này. Có thể sử dụng ID để tạo kiểu CSS tùy chỉnh hoặc tạo liên kết đến các phần cụ thể trên trang của bạn.

Lớp CSS

Nhập các lớp CSS tùy chọn để sử dụng cho mô-đun này. Một lớp CSS có thể được sử dụng để tạo một kiểu CSS tùy chỉnh. Bạn có thể thêm nhiều lớp, cách nhau bằng dấu cách. Các lớp này có thể được sử dụng trong chủ đề con Divi của bạn hoặc trong bảng định kiểu CSS tùy chỉnh mà bạn thêm vào trang hoặc trang web của mình bằng cách sử dụng các tùy chọn chủ đề Divi hoặc cài đặt trang Divi Builder.

CSS tùy chỉnh

CSS tùy chỉnh cũng có thể được áp dụng cho mô đun và một trong các thành phần bên trong của mô-đun. Trong phần Custom CSS, bạn sẽ tìm thấy một trường văn bản, trong đó bạn có thể thêm các bảng định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục CSS trong các tham số này đã được gói trong các thẻ kiểu. Vì vậy, chỉ cần nhập các quy tắc CSS được phân tách bằng dấu chấm phẩy.

Băng chuyền tự động

Nếu tùy chọn bố trí băng chuyền được chọn và bạn muốn băng chuyền tự động trượt mà không có khách truy cập phải nhấp vào nút tiếp theo, hãy bật tùy chọn này và điều chỉnh tốc độ quay bên dưới nếu bạn muốn.

Tốc độ băng chuyền tự động

Ở đây bạn có thể nhập tốc độ quay của băng chuyền, nếu tùy chọn "Xoay vòng băng chuyền tự động" được kích hoạt ở trên. Số càng cao, thời gian dừng giữa mỗi lần quay càng dài. (Ví dụ: 1000 = 1 giây)

tầm nhìn

Tùy chọn này cho phép bạn kiểm soát các thiết bị mà mô-đun của bạn xuất hiện. Bạn có thể chọn tắt mô-đun của mình trên máy tính bảng, điện thoại thông minh hoặc máy tính để bàn. Điều này rất hữu ích nếu bạn muốn sử dụng các mô-đun khác nhau trên các thiết bị khác nhau hoặc nếu bạn muốn đơn giản hóa thiết kế di động bằng cách loại bỏ các yếu tố nhất định của trang.

Hướng dẫn Divi khác

Bài viết này chứa comments 7
  1. Bonjour,
    Tôi quản lý để có ví có thể lọc hoặc ví có chiều rộng đầy đủ nhưng chiều rộng đầy đủ không thể lọc được.
    Tôi muốn có thể thêm tiêu đề của dự án liên quan vào hình ảnh danh mục đầu tư có thể lọc của tôi, như trường hợp với danh mục đầu tư của cổ điển. Bạn có biết làm thế nào để làm điều đó ?

  2. Hello!

    Tôi vừa đi trên Divi và tôi tình cờ tạo ra một trang "Quảng cáo" trong đó quảng cáo mới của tôi sẽ xuất hiện trong các hình thu nhỏ / hình thu nhỏ cạnh nhau như trên các trang web của cơ quan bất động sản. Để biết thông tin, tôi đã tạo các trang ADS của mình và một số bài viết (một bài viết cho một quảng cáo) mà tôi liên kết với danh mục ADS. nhưng chúng xuất hiện ở định dạng lớn. Tôi hy vọng tôi đã giải thích chính mình trong vấn đề của tôi! Trong khi chờ đề xuất của bạn, cảm ơn bạn trước lời giải thích và lời khuyên của bạn! Chúc ngủ ngon !! Trân trọng - Jerome

  3. Bonjour,

    Cảm ơn bạn cho bài viết rất đầy đủ của bạn.
    Tôi quản lý để hiển thị một porftolio chiều rộng đầy đủ hoặc một danh mục đầu tư có thể lọc nhưng với lợi nhuận lớn xung quanh.
    Bạn có biết nếu divi có thể hiển thị danh mục đầu tư có thể lọc toàn bộ chiều rộng không?
    Hoặc để hiển thị một danh mục đầu tư có thể lọc mà không có lợi nhuận đáng kể?

    Merci

  4. Xin chào, tôi thực sự đánh giá cao bài viết của bạn nhưng khi tôi cố gắng tái tạo kiểu bố cục này, tôi có khoảng cách lớn giữa các hình ảnh của mình. Tôi muốn có những hình ảnh đính kèm như trong ví dụ của bạn. Làm thế nào để cấu hình mô-đun cho việc này?

    Cảm ơn bạn!

Để 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
14 cổ phiếu
cổ phiếu2
tweet2
Enregistrer10