Sử dụng mô-đun tìm kiếm, bạn có thể đặt một hình thức tìm kiếm bất cứ nơi nào trên trang web của bạn. Cái này hình thức Tìm kiếm sẽ cho phép khách truy cập tìm kiếm tất cả nội dung 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 mang lại. Bạn không chỉ có thể kiểm soát vị trí của hình thức tìm kiếm trên trang mà còn 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ô-đ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. Một 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 trình chỉnh sửa bài đăng bất cứ khi nào bạn tạo một trang mới. Nhấp vào nút này để kích hoạt Divi Builder và truy cập tất cả các mô-đun của Divi Builder. Sau đó bấm vào nút Sử dụng Visual Builder để khởi động trình tạo ở 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 bạn ở phía trước nếu bạn được kết nối với bảng điều khiển WordPress của bạn.
Khi bạn đã vào 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 mình. Mô-đun mới chỉ có thể được thêm vào bên trong các hàng. Nếu bạn đang bắt đầu một trang mới, hãy nhớ thêm một hàng vào trang của bạn trước.
Định vị mô-đun tìm kiếm trong danh sách các mô-đun và nhấp vào mô-đun đó để thêm 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ể gõ từ "tìm kiếm" và sau đó nhấp vào enter để tìm kiếm và tự động thêm mô-đun tìm kiếm! Sau khi mô-đun được thêm vào, 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 tìm kiếm tùy chỉnh vào trang blog có chiều rộng đầy đủ
Đối với 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 gặp 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. Bên dưới mô-đun tìm kiếm là mô-đun blog sử dụng bố cục lưới.
Sử dụng Visual Builder, thêm một phần tiêu chuẩn mới vào trang blog có hàng đầy đủ chiều rộng (1 cột). 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 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 nhập: 1em
Đệm tùy chỉnh: 20px Trên cùng, 20px Dưới cùng
Lưu cài đặt
Bây giờ quay lại để thay đổi độ rộng của hàng chứa mô-đun tìm kiếm của bạn. Trên tab Thiết kế của cài đặt đường, cung cấp cho đường có chiều rộng tùy chỉnh là 300px. Điều này sẽ giữ cho mô-đun tìm kiếm nhỏ gọn và tập trung vào trang.
Đó là tất cả!
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 yếu 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ả đ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.
Văn bản giữ chỗ
Nhập văn bản mà 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 khỏi kết quả tìm kiếm.
Loại trừ mặt hàng
Kích hoạt tùy chọn này sẽ loại trừ tin nhắn khỏi kết quả tìm kiếm.
Không bao gồm danh mục
Chọn 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ễ dàng nhận biết. Khi bạn sử dụng dạng xem 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 dáng cho mô-đun, chẳng hạn như phông chữ, màu sắc, định cỡ và khoảng cách. Đây là tab bạn sẽ sử dụng để thay đổi giao diện của mô-đun của mình. Mỗi mô-đun Divi có một danh sách dài các cài đặt thiết kế mà bạn có thể sử dụng để tinh chỉnh mọi thứ.
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 văn bản chỗ dành sẵn để đảm bảo rằng nó có thể đọc được.
Màu văn bản
Tại đây bạn có thể chọn giá trị văn bản của mình. 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 đang làm việc với nền sáng, văn bản của bạn phải 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.
Cảnh sát nhập cảnh
Bạn có thể thay đổi phông chữ của văn bản đầu vào bằng cách chọn phông chữ mong muốn từ menu thả xuống. Divi đi kèm với hàng tá phông chữ tuyệt vời được cung cấp 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, viết hoa và gạch chân.
Kích thước phông chữ nhập
Tại đây bạn có thể điều chỉnh kích thước văn bản đầu vào của mình. 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 của mình hoặc nhập trực tiếp giá trị của kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầ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ị 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 trong Divi đều có 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 từ 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 cách 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 đầu vào của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầ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ị 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 khoảng cách giữa mỗi dòng trong văn bản nhập của 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 cách hoặc nhập kích thước khoảng cách mong muốn vào trường. mục bên phải của con trỏ. Các trường đầ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ị kích thước của bạn để thay đổi loại đơn vị của nó.
Nút và màu đường viền
Thao tác này sẽ thay đổi màu nền và đường viền của 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 của mình 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ữ tuyệt vời được cung cấp 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, viết 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 của văn bản nút của mình. 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 của mình hoặc nhập trực tiếp giá trị của kích thước văn bản mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầ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ị 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 trong Divi đều có 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 từ 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 cách 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 nút của mình, hãy sử dụng thanh trượt phạm vi để điều chỉnh khoảng cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập ở bên phải thanh trượt. Các trường đầ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ị kích thước của bạn để thay đổi loại đơn vị của nó.
Chiều cao của dòng của nút
Chiều cao dòng ảnh hưởng đến khoảng cách giữa mỗi dòng trong văn bản nút của 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 cách hoặc nhập kích thước khoảng cách mong muốn vào trường nhập nằm ở bên phải của con trỏ. Các trường đầ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ị kích thước của bạn để thay đổi loại đơn vị của nó.
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 là thanh tìm kiếm sẽ được hiển thị ở chiều rộng tự nhiên của nó trừ khi chiều rộng của thanh tìm kiếm vượt quá chiều rộng của cột mẹ, trong trường hợp đó, thanh tìm kiếm sẽ bị giới hạn ở 100% chiều rộng của cột. Nếu bạn muốn hạn chế hơn nữa chiều rộng tối đa của thanh tìm kiếm, bạn có thể làm như vậy bằng cách nhập giá trị chiều rộng tối đa mong muốn tại đây. Ví dụ: giá trị 50% sẽ giới hạn chiều rộng của thanh tìm kiếm bằng 50% chiều 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 bên trên, bên dưới hoặc bên trái và bên phải của nó. Bạn có thể thêm các giá trị lề tùy chỉnh vào bất kỳ cạnh nào trong bốn cạnh của mô-đun. Để loại bỏ lề tùy chỉnh, hãy xóa giá trị gia tăng khỏi trường nhập. Theo mặc định, các giá trị này được đo bằng pixel, nhưng bạn có thể nhập các đơn vị đo lường tùy chỉnh vào các trường đầu vào.
Đệm tùy chỉnh
Infill là không gian được thêm vào bên trong mô-đun của bạn, giữa cạnh của mô-đun và các phần tử bên trong của nó. Bạn có thể thêm các giá trị đệm tùy chỉnh vào bất kỳ mặt nào trong bốn mặt của mô-đun. Để loại bỏ lề tùy chỉnh, hãy xóa giá trị gia tăng khỏi trường nhập. Theo mặc định, các giá trị này được đo bằng pixel, nhưng bạn có thể nhập các đơn vị đo lường tùy chỉnh vào các trường đầu vào.
Tùy chọn nâng cao của Mô-đun nghiên cứu
Trên 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. Tại đây, bạn có thể áp dụng CSS tùy chỉnh cho bất kỳ phần tử nào trong số nhiều phần tử của mô-đun. Bạn cũng có thể áp dụng các lớp CSS và ID tùy chỉnh 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.
ID CSS
Nhập một ID CSS tùy chọn để sử dụng cho mô-đun này. ID có thể được sử dụng để tạo kiểu CSS tùy chỉnh hoặc để 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 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 biểu định kiểu CSS tùy chỉnh mà bạn thêm vào trang của mình hoặc vào trang web của bạn 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à bất kỳ nội dung nào của mô-đun. Trong phần CSS tùy chỉnh, bạn sẽ tìm thấy một trường văn bản nơi bạn có thể thêm các biểu định kiểu CSS tùy chỉnh trực tiếp vào từng phần tử. Các mục nhập CSS trong các cài đặt này đã được bao bọc 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 trên đó. Bạn có thể chọn tắt từng 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 hữu ích nếu bạn muốn sử dụng các mod 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ỏ một số yếu tố nhất định khỏi trang.
[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expand "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "flat" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] TẢI XUỐNG TRANG CHỦ [/ vcex_button] [/ width_column] [»vc_column] »1/2 ″] [vcex_button url =" https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials "target =" blank "layout =" expand "align =" center " font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right =" fa fa-download "] TẢI XUỐNG DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Hướng dẫn Divi khác
- trang web 5 để sử dụng hàng Divi chủ đề
- Cách thêm văn bản vào sản phẩm Divi WooCommerce
- Cách thay đổi màu menu giữa các trang Divi
- Cách cá nhân hóa lưới của blog với Divi
- Làm thế nào để sử dụng trình biên tập Divi vai trò trên WordPress
- Cách tạo thanh trượt Divi toàn màn hình
- Cách thay đổi màu của menu giữa các trang Divi
- Các tính năng có thể bạn chưa biết về Divi
- Cách sử dụng Divi Builder trên WordPress
- Cách sử dụng mô-đun cuộn video Divi
- Cách sử dụng mô-đun Divi Builder Flip
- Cách thêm mô-đun chứng thực trên Divi Builder
- Cách sử dụng mô-đun văn bản Divi
- Cách tạo thanh trượt trên Divi
- Cách chỉnh sửa vai trò người dùng Divi
- Cách sử dụng mô-đun Truyền thông xã hội Divi
- Cách sử dụng mô-đun cửa hàng trên chủ đề WordPress Divi
- Cách sử dụng mô-đun bên Divi
- Cách sử dụng mô-đun bảng giá Divi
- Cách sử dụng mô-đun tiêu đề của ấn phẩm Divi
- Cách thêm mô-đun video của Divi
- Cách sử dụng mô-đun điều hướng bài viết
- Cách sử dụng mô-đun tìm kiếm Divi
- Cách sử dụng mô-đun ví Divi
- Cách sử dụng mô-đun người trên Divi Builder
- Cách sử dụng mô-đun ví với bộ lọc Divi
- Cách sử dụng mô-đun trượt toàn bộ chiều rộng
- Cách sử dụng Mô-đun hình ảnh Divi Builder
- Cách sử dụng mô-đun điều hướng chiều rộng đầy đủ của Divi Builder
- Cách sử dụng mô-đun thư viện hình ảnh
- Cách sử dụng Mô-đun Thẻ Đa Năng Divi Builder
- Cách sử dụng Mô-đun danh mục đầu tư chiều rộng đầy đủ Divi
- Cách sử dụng mô đun tiêu đề toàn chiều rộng Divi
- Cách sử dụng Module Divi Counter
- Cách sử dụng thanh trượt bài viết trên Divi Builder
- Cách sử dụng mô-đun Optin Email Optin
Bonjour,
Cảm ơn bạn vì bài báo này.
Có một điểm mà bạn chưa giải quyết (và thật không may, đây chính xác là điểm khiến tôi gặp sự cố ...):
Khi chọn hiển thị nút tìm kiếm, theo mặc định, văn bản của nút là "Tìm kiếm" và tôi muốn biết, làm cách nào để sửa đổi văn bản này để cá nhân hóa nó? Cho dù tôi đã tìm kiếm khắp nơi như thế nào, tôi không tìm thấy bất kỳ lĩnh vực hoặc không gian nào có thể tạo ra sự thay đổi này ...
Cảm ơn trước sự giúp đỡ của bạn !
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 biểu 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 giới hạn cho các câu hỏi duy nhất 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 biểu mẫu tìm kiếm. những người có từ khóa mà anh ấy quan tâm. Cảm ơn bạn trước cho câu trả lời của bạn.
Cảm ơn bạn về bài viết này, rất vui khi loại bỏ các trang khỏi mô-đun tìm kiếm, nhưng bạn cũng có thể loại trừ các trang khi bạn thực hiện tìm kiếm với kính lúp của tiêu đề không ?? Cảm ơn bạn
Xin chào David,
Tôi vẫn chưa thử nghiệm tùy chọn này.