[Ad_1]
Tổng quan về hộp tìm kiếm Divi
Văn phòng
di động
Tải xuống và / hoặc sửa đổi tiêu đề chung
Đối với bài viết này, chúng tôi sẽ sử dụng header / footer miễn phí đi kèm với gói bố cục giao hàng tạp hóa của chúng tôi. Bạn chỉ cần tải xuống .Zip *: tiếng Pháp lưu trữ và giải nén những thứ cần thiết .json tệp trên máy tính của bạn.
Sau đó, hãy chuyển đến bảng điều khiển WordPress của bạn và điều hướng đến Divi - Trình tạo chủ đề. Từ đó, bạn phải nhấp vào biểu tượng mũi tên lên và xuống để mở các tùy chọn khả năng di động.
Trong phương thức mới, nhấp vào nhập khẩu tab và tìm .json tệp bạn đã tải xuống. Khi bạn đã sẵn sàng, hãy chọn Nhập mô hình trình tạo từ Chủ đề Divi để bắt đầu tải xuống.
Tại thời điểm này, bạn đã sẵn sàng để nhập Tiêu đề chung một phần của mẫu trang web Theo mặc định. Nhập từ .json tệp nên đã tự động áp dụng freebie làm tiêu đề trang web tổng thể.
Thêm trường tìm kiếm vào thanh menu phụ
Sử dụng Divi Visual Builder, bạn sẽ thấy một cái gì đó tương tự như cái này dưới dạng Global Header.
Điều đầu tiên chúng tôi muốn làm là tạo không gian cho hộp tìm kiếm. Chúng tôi muốn đảm bảo rằng mọi người đều có thể dễ dàng truy cập vào trường tìm kiếm. khách, vì vậy chúng tôi sẽ thêm nó vào menu phụ (phía trên Trang chủ / Liên hệ hàng).
Để bắt đầu, chúng tôi sẽ thêm hộp tìm kiếm bằng cách sử dụng Mô-đun tìm kiếm Divi trong cột thứ ba của hàng đầu tiên.
Văn bản trình giữ chỗ rất quan trọng đối với các trường tìm kiếm, vì vậy khi mô-đun của bạn ở đúng vị trí, hãy chuyển đến Tham số và thiết lập Khu vực dành riêng văn bản tới nội dung nào đó nhắc nhở người dùng về nội dung cần tìm. chúng ta đặt Tìm các mặt hàng! như một trình giữ chỗ để người dùng biết đây là những gì họ có thể tìm kiếm vì chúng tôi đang sử dụng gói bố trí giao hàng tạp hóa.
Hộp tìm kiếm nằm trong cột thứ ba là không tốt. Vì vậy, chúng tôi muốn nhập Mô-đun nghiên cứu cài đặt và đi đến Thiết kế lưỡi. Tìm nó Transformer tùy chọn, sau đó đi đến Phiên dịch tab (thứ hai). Sau đó, bạn có thể kéo mô-đun tìm kiếm vào vị trí và Divi sẽ xử lý tất cả CSS và khoảng cách cho nó.
Chúng tôi cũng sử dụng% cho giá trị này để nó vẫn tương đối bất kể khung nhìn trên máy tính để bàn. Sử dụng pixels có thể làm sai lệch một số độ phân giải khác nhau.
Divi Biến Dịch các tùy chọn cũng cần được điều chỉnh cho điện thoại di động. Nếu bạn không, nó vẫn như cũ. Vì vậy, hãy chắc chắn đi đến Phản ứng cài đặt và đặt vị trí của mô-đun tìm kiếm trong các tùy chọn menu phụ. Chúng tôi vừa điều chỉnh vị trí theo chiều dọc của thiết bị di động bởi vì đặt nó vào cột thứ ba của hàng sẽ tự động hiển thị nó ở cuối các mục hàng.
Tạo kiểu cho mô-đun tìm kiếm Divi
Mặc dù bạn không có nhiều tùy chọn tạo kiểu cho hộp tìm kiếm, nhưng bạn có một vài tùy chọn. Cụ thể là màu của văn bản và của chính trường, cả khi nó không hoạt động và khi người dùng nhấp vào nó. (Tất nhiên là khoảng cách và kích thước cũng như các tùy chọn thiết kế Divi tiêu chuẩn khác.)
Để tìm các tùy chọn màu, hãy chuyển đến Sự nhai menu trong Thiết kế lưỡi. Sau khi được mở rộng, bạn có khả năng sửa đổi màu văn bản của trình giữ chỗ, màu nền của trường và màu của văn bản của trường (văn bản do người dùng nhập vào, chẳng hạn như văn bản). Ngoài ra để tập trung các biến thể là khi người dùng tương tác cụ thể với hộp tìm kiếm.
Khi cái này được tạo kiểu theo ý bạn, hãy nhấp vào nút Lưu.
Kiểm tra cài đặt hiển thị
Một số gói bố cục và tiêu đề miễn phí của chúng tôi đi kèm với các tùy chọn hiển thị khác nhau cho máy tính để bàn và thiết bị di động. Nếu bạn thấy các mod bị mờ / bị xám trong trình tạo hình ảnh, điều đó cho thấy rằng mod đã bị tắt trên một số thiết bị.
Đối với tiêu đề giao hàng tạp hóa, hai cột cuối cùng bị tắt trên thiết bị di động. Chúng tôi muốn nhập Cài đặt dòng và nhấp vào cài đặt của các cột bạn muốn hiển thị trên thiết bị di động. Trong trường hợp này, nó là thứ ba.
Sau đó đi đến tiến bộ cái lưỡi và điều hướng đến tầm nhìn Lựa chọn. Tại đây, hãy đảm bảo rằng tất cả các tùy chọn trong tắt về không được kiểm tra cho cột chứa trường tìm kiếm của bạn. Nhấp vào nút Lưu (đánh dấu xanh), và các mô-đun phải có màu sắc và không còn bị đổi màu.
Khi bạn đã chắc chắn rằng mọi thứ đều hiển thị, bạn đã sẵn sàng đưa thứ này lên mạng!
Lưu công việc của bạn
Đảm bảo rằng bạn nhấp vào nút lưu màu xanh lá cây ở dưới cùng bên phải của màn hình.
Bây giờ bạn đã sẵn sàng để đóng trình tạo hình ảnh bằng cách sử dụng dấu X ở góc trên bên phải. Trên màn hình tiếp theo, bạn sẽ muốn đảm bảo rằng Trình tạo chủ đề Divi đã lưu tất cả các tùy chọn của bạn. Nếu anh ấy nói Lưu thay đổi, Nhấn nút. Nếu anh ấy nói Đã lưu tất cả thay đổi, thì trường tìm kiếm của bạn đã xuất hiện trong menu phụ Divi của bạn.
Kết quả cuối cùng
Tất cả những gì còn lại cần làm là chiêm ngưỡng công việc của bạn trên trang web của bạn!
Văn phòng
di động
Kết luận với trường tìm kiếm Divi
Hộp tìm kiếm là một phần cơ bản của trải nghiệm người dùng tốt cho trang web của bạn. Nếu bạn muốn cung cấp dịch vụ tốt nhất có thể cho khách, đảm bảo nội dung của bạn có thể tìm kiếm được sẽ là một trong những ưu tiên hàng đầu của bạn. Tôi hy vọng bạn có thể sử dụng phương pháp nhanh chóng và dễ dàng này cũng như sớm áp dụng nó vào trang Divi của mình!
[Ad_2]
