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

Divi hướng dẫn: Cách sử dụng mô-đun Tìm kiếm

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

Bằng cách sử dụng mô-đun tìm kiếm, bạn có thể đặt một mẫu tìm kiếm ở bất cứ đâu trên trang web của bạn. Biểu mẫu tìm kiếm này sẽ cho phép khách truy cập của bạn tìm kiếm tất cả nội dung trên trang web của bạn, bao gồm tất cả các trang và bài đăng trên blog. Điều này cung cấp cho bạn chức năng của tiện ích tìm kiếm WordPress với tính linh hoạt mà Divi Builder cung cấp. Bạn không chỉ có thể kiểm soát vị trí của các hình thức tìm kiếm trên trang mà còn có thể tùy chỉnh thiết kế của nó.

Cách thêm mô-đun tìm kiếm vào trang của bạn

Trước khi bạn có thể thêm một mô-đun tìm kiếm vào trang của mình, trước tiên bạn phải chuyển sang 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 dấu cộng màu xám để thêm mô-đun mới vào trang của bạn. Các mô đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn bắt đầu một trang mới, trước tiên đừng quên thêm một dòng vào trang của bạn.

module nghiên cứu divi.png

Tìm mô-đun tìm kiếm trong danh sách các mô-đun và nhấp vào nó để thêm nó vào trang của bạn. Danh sách các mô-đun có thể tìm kiếm được, có nghĩa là bạn cũng có thể nhập từ "tìm kiếm", sau đó nhấp vào nhập để tìm kiếm và tự động thêm mô-đun tìm kiếm! Khi module được thêm vào, bạn sẽ được chào đón bởi danh sách tùy chọn module. 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 tìm kiếm tùy chỉnh vào trang Blog toàn chiều rộng

Trong ví dụ này, tôi sẽ chỉ cho bạn cách thêm mô-đun tìm kiếm làm lời gọi hành động chính ở đầu trang blog. Điều này cho phép người dùng dễ dàng tìm kiếm nội dung blog của bạn mà không cần bất kỳ sự lộn xộn nào.

Trang này có tiêu đề chiều rộng đầy đủ ở trên cùng với mô-đun tìm kiếm ngay bên dưới. Dưới mô-đun tìm kiếm là một mô-đun blog sử dụng bố cục của lưới.

ví dụ blog với dạng tìm kiếm divi.jpg

Sử dụng Visual Builder, thêm một phần tiêu chuẩn mới vào trang blog với dòng đầy đủ (cột 1). Sau đó chèn mô-đun tìm kiếm vào hàng.

Cập nhật cài đặt mô-đun tìm kiếm như sau:

Tùy chọn nội dung

Văn bản dành riêng: Tìm kiếm blog của chúng tôi ...
Ẩn nút: YES

Tùy chọn thiết kế

Màu nền của trường nhập: # f8f8f8
Màu của trình giữ chỗ: # 888888
Kích thước phông chữ đầu vào: 16px
Màu văn bản nhập: # 888888
Chiều cao của dòng đầu vào: 1em
Đệm tùy chỉnh: Đầu trang 20px, Dưới cùng 20px

divi search configuration content.png

Lưu cài đặt

Bây giờ, quay lại để thay đổi chiều rộng của dòng chứa mô-đun tìm kiếm của bạn. Trên tab Thiết kế tham số dòng, hãy đặt đường thành chiều rộng tùy chỉnh của 300 px. Điều này sẽ giữ cho mô-đun tìm kiếm nhỏ gọn và tập trung vào trang.

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

chiều rộng divi.png cấu hình

Vậy là xong!

Tìm kiếm các tùy chọn nội dung

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.

tìm kiếm mô-đun divi contenu.png

Văn bản trình giữ chỗ

Nhập văn bản bạn muốn sử dụng làm trình giữ chỗ cho trường tìm kiếm.

Nút ẩn

Nếu bạn bật tùy chọn này, nút Tìm kiếm sẽ bị ẩn.

Loại trừ trang

Nếu bạn bật tùy chọn này, các trang sẽ bị loại trừ khỏi kết quả tìm kiếm.

Loại trừ mặt hàng

Bật tùy chọn này sẽ loại trừ tin nhắn khỏi kết quả tìm kiếm.

Loại trừ danh mục

Chọn các danh mục bạn muốn loại trừ khỏi kết quả tìm kiếm.

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ế tìm kiếm

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 để sửa đổi bất cứ điều gì.

divi search design.png

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 nền của trường nhập

Tại đây bạn có thể thay đổi màu nền của thanh tìm kiếm.

Màu giữ chỗ

Trước khi trường tìm kiếm được sử dụng, văn bản giữ chỗ tồn tại bên trong trường. Nếu bạn đã điều chỉnh màu nền của trường, bạn cũng có thể điều chỉnh màu của văn bản trình giữ chỗ để đảm bảo nó có thể đọc được.

Màu văn bản

Ở đây bạn có thể chọn giá trị của văn bản của bạn. Nếu bạn đang làm việc trên nền tối, văn bản của bạn sẽ được bật. Nếu bạn làm việc với một nền tảng rõ ràng, văn bản của bạn nên tối.

Định hướng văn bản

Điều này kiểm soát cách văn bản của bạn được căn chỉnh trong mô-đun.

Phông chữ nhập

Bạn có thể thay đổi phông chữ của văn bản nhập 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 của phông chữ đầu vào

Ở đây bạn có thể điều chỉnh kích thước của văn bản đầu vào 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 nhập

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 nhập, 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 chữ

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 nhập, 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

Chiều cao dòng ảnh hưởng đến không gian giữa mỗi dòng đầu vào văn bản của bạn Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước mong muốn trong lĩnh vực không gian đã nhập vào bên phải con trỏ. Các lĩnh vực đầu vào 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 kiểu của đơn vị.

Nút và màu đường viền

Điều này sẽ thay đổi màu nền và màu của đường viền nút tìm kiếm.

Phông chữ nút

Bạn có thể thay đổi phông chữ của văn bản nút 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ữ của nút

Tại đây bạn có thể điều chỉnh kích thước văn bản của nút. 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 nút

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 nút, 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 giữa các chữ cái của nút

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 nút của văn bản, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào phía bên phải của con trỏ. Các lĩnh vực đầu vào 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 kiểu của đơn vị.

Chiều cao của dòng của nút

Chiều cao dòng ảnh hưởng đến không gian giữa mỗi dòng văn bản trong nút của bạn Nếu bạn muốn tăng khoảng cách giữa mỗi dòng, sử dụng thanh trượt để điều chỉnh phạm vi không gian hoặc nhập kích thước khoảng cách mong muốn trong lĩnh vực đầu vào nằm ở bên phải của con trỏ. Các lĩnh vực đầu vào 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 kiểu của đơn vị.

Chiều rộng tối đa

Theo mặc định, chiều rộng tối đa của thanh tìm kiếm được đặt thành 100%. Điều này có nghĩa rằng các thanh tìm kiếm được hiển thị ở độ rộng tự nhiên của nó ít hơn chiều rộng của thanh tìm kiếm không vượt quá chiều rộng của cột phụ huynh, trong trường hợp đó vào thanh tìm kiếm sẽ được giới hạn 100% độ rộng của cột. Nếu bạn muốn hạn chế chiều rộng tối đa của thanh tìm kiếm, bạn có thể thực hiện điều này bằng cách nhập giá trị chiều rộng tối đa mong muốn tại đây. Ví dụ, một giá trị% giới hạn 50 độ rộng của thanh tìm kiếm ở 50% độ rộng của cột mẹ.

Lề tùy chỉnh

Lề là khoảng trống được thêm vào bên ngoài mô-đun của bạn, giữa mô-đun và phần tử tiếp theo ở trên, bên dưới hoặc bên trái và bên phải của phần tử đó. Bạn có thể thêm các giá trị lề tùy chỉnh vào một trong bốn mặt của mô đun. Để xóa lề tùy chỉnh, hãy xóa giá trị được thêm từ trường nhập. Theo mặc định, các giá trị này được tính theo pixel, nhưng bạn có thể nhập đơn vị đo lường tùy chỉnh trong các trường nhập.

Đệm tùy chỉnh

Fill là khoảng trống được thêm vào bên trong module của bạn, giữa cạnh của module và các phần tử bên trong của nó. Bạn có thể thêm các giá trị điền tùy chỉnh vào một trong bốn mặt của mô-đun. Để xóa lề tùy chỉnh, hãy xóa giá trị được thêm từ trường nhập. Theo mặc định, các giá trị này được tính theo pixel, nhưng bạn có thể nhập đơn vị đo lường tùy chỉnh trong các trường nhập.

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

Tùy chọn nâng cao của mô-đun nghiên cứu

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.

divi advanced option module search.png

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.

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 3
  1. Xin chào, cảm ơn cho bài viết. Tôi có một câu hỏi, có thể chỉ sử dụng mẫu tìm kiếm cho một phần của trang không? ví dụ: đối với phần Câu hỏi thường gặp, tôi muốn thiết lập một biểu mẫu tìm kiếm chỉ giới hạn cho các câu hỏi của Câu hỏi thường gặp (+ 20 câu hỏi) theo cách này người dùng không phải đọc tất cả mà chỉ tìm thấy nhờ vào mẫu tìm kiếm những từ khóa mà anh ấy quan tâm. Cảm ơn bạn đã trả lời của 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
20 cổ phiếu
cổ phiếu12
tweet2
Enregistrer6