[Ad_1]

Bez pola wyszukiwania ucierpi nawigacja w Twojej witrynie. Możesz korzystać z najbardziej niezawodnego przeglądania Internetu, ale jeśli Twoi użytkownicy nie mogą znaleźć dokładnie tego, czego szukają, ryzykujesz (i prawdopodobnie stracisz) biznes. Ten samouczek poprowadzi Cię przez dodanie pola wyszukiwania do dodatkowego menu Divi, dzięki czemu w każdym przypadku Twoi użytkownicy będą zawsze o kilka kliknięć od wszystkiego, czego potrzebują.

Przegląd pola wyszukiwania Divi

Biuro

komputerowa wersja pola wyszukiwania divi

Aplikacje mobilne

mobilna wersja pola wyszukiwania divi

Pobierz i/lub zmodyfikuj globalny nagłówek

W tym artykule użyjemy bezpłatnego nagłówka / stopki, który jest dostarczany z naszym pakietem układu dostawy artykułów spożywczych. Możesz po prostu pobrać .Zip *: francuski zarchiwizuj i wyodrębnij niezbędne .json plik na twoim komputerze.

plik json

Następnie przejdź do pulpitu WordPress i przejdź do Divi - Generator motywów. Stamtąd musisz kliknąć na ikona strzałek w górę iw dół aby otworzyć opcje przenoszenia.

generator motywów dla pola wyszukiwania divi

W nowym trybie kliknij na import zakładka i znajdź .json pobrany plik. Kiedy będziesz gotowy, wybierz Importuj modele konstruktorów z Motyw Divi aby rozpocząć pobieranie.

importuj pliki

W tym momencie jesteś gotowy, aby wejść do Globalny nagłówek część Szablon strony internetowej domyślnie. Importuj z .json plik powinien automatycznie zastosować freebie jako ogólny nagłówek witryny.

globalny nagłówek

Dodaj pole wyszukiwania do dodatkowego paska menu

Używając Divi Visual Builder, powinieneś zobaczyć coś podobnego do tego jako Global Header.

globalny edytor nagłówków

Pierwszą rzeczą, którą chcemy zrobić, jest utworzenie miejsca na pole wyszukiwania. Chcemy mieć pewność, że pole wyszukiwania jest łatwo dostępne dla każdego. odwiedzający, więc dodamy go do menu pomocniczego (powyżej Strona główna / Kontakt linia).

Na początek dodamy pole wyszukiwania za pomocą Moduł wyszukiwania Divi w trzeciej kolumnie pierwszego rzędu.

moduł wyszukiwania w trzeciej kolumnie

Tekst zastępczy jest ważny dla pól wyszukiwania, więc gdy moduł jest już na miejscu, przejdź do Parametry i ustaw swój Obszar zastrzeżony tekst do czegoś, co przypomina użytkownikowi, czego szukać. kładziemy Znajdź przedmioty! jako symbol zastępczy, aby użytkownik wiedział, czego może szukać, ponieważ korzystamy z pakietu układu dostawy artykułów spożywczych.

tekst zastępczy w polu wyszukiwania divi

Pole wyszukiwania znajdujące się w trzeciej kolumnie nie jest dobre. Więc chcemy wejść w Moduł badawczy ustawienia i przejdź do Projekt język. Znajdź to Transformator opcje, a następnie przejdź do tłumaczyć zakładka (druga). Następnie możesz przeciągnąć moduł wyszukiwania na miejsce, a Divi zajmie się całym CSS i odstępami.

Dla tej wartości używamy również%, aby pozostała ona względna niezależnie od widocznego obszaru na pulpicie. Za pomocą pikseli może zniekształcać niektóre rozdzielczości.

opcje transformacji

Divi Transformer Translate opcje należy również dostosować do telefonu komórkowego. Jeśli nie, to jest to samo. Więc koniecznie przejdź do Reaktywność ustawienia i ustaw lokalizację modułu wyszukiwania w dodatkowych opcjach menu. Właśnie dostosowaliśmy pionowe umieszczenie telefonu komórkowego, ponieważ umieszczenie go w trzeciej kolumnie wiersza automatycznie wyświetla go na dole elementów wiersza.

przekształć na telefon komórkowy

Stylizacja modułu wyszukiwania Divi

Chociaż nie masz wielu opcji stylizacji pola wyszukiwania, masz ich kilka. Oznacza to kolor tekstu i samego pola, zarówno gdy jest nieaktywne, jak i gdy użytkownik na nie kliknął. (I oczywiście odstępy i rozmiary oraz inne standardowe opcje projektowania Divi.)

Aby znaleźć opcje kolorów, przejdź do Chrupać menu w Projekt język. Po rozwinięciu masz możliwość zmiany koloru tekstu symbolu zastępczego, koloru tła pola i koloru tekstu pola (tekst wprowadzony przez użytkownika, np. do powiedzenia). Ponadto koncentrować odmiany występują wtedy, gdy użytkownik wchodzi w interakcję z polem wyszukiwania.

styl pola wyszukiwania

Gdy jest to stylizowane zgodnie z Twoimi upodobaniami, kliknij przycisk Zapisz.

Sprawdź ustawienia widoczności

Niektóre z naszych bezpłatnych pakietów układów i nagłówków zawierają różne opcje wyświetlania dla komputerów stacjonarnych i urządzeń mobilnych. Jeśli widzisz przyciemnione / wyszarzone mody w kreatorze wizualnym, oznacza to, że mod jest wyłączony na niektórych urządzeniach.

W przypadku nagłówka dostawy artykułów spożywczych ostatnie dwie kolumny są wyłączone na urządzeniach mobilnych. Chcemy wejść na Ustawienia linii i kliknij ustawienia kolumn, które chcesz wyświetlać na telefonie komórkowym. W tym przypadku jest to trzecia.

opcje linii

Następnie przejdź do postęp język i przejdź do widoczność opcja. Tutaj upewnij się, że wszystkie opcje poniżej dezaktywować o niepowstrzymany dla kolumny zawierającej pole wyszukiwania. Kliknij przycisk Zapisz (zielony kleszcz), a moduły powinny być kolorowe i nie powinny być już przebarwione.

Champ de Recherche

Po upewnieniu się, że wszystko jest widoczne, możesz umieścić to w Internecie!

Zapisz swoją pracę

Pamiętaj, aby kliknąć zielony przycisk zapisu w prawym dolnym rogu ekranu.

zapisz swoje zmiany

Jesteś teraz gotowy do zamknięcia generatora wizualnego za pomocą X w prawym górnym rogu. Na następnym ekranie będziesz chciał się upewnić, że Divi Theme Builder zapisał wszystkie twoje opcje. Jeśli powie Zapisz zmiany, Kliknij przycisk. Jeśli powie Wszystkie zmiany zostały zapisane, to pole wyszukiwania jest już aktywne w menu dodatkowym Divi.

pole wyszukiwania divi zapisz zmiany

Ostateczne wyniki

Wszystko, co pozostało do zrobienia, to podziwiać Twoją pracę na swojej stronie!

Biuro

wersja na komputery stacjonarne

Aplikacje mobilne

wersja mobilna

Wniosek z polem wyszukiwania Divi

Pola wyszukiwania są podstawowym elementem dobrego doświadczenia użytkownika w Twojej witrynie. Jeśli chcesz zapewnić najlepszą możliwą obsługę swoim odwiedzający, upewnienie się, że Twoje treści można przeszukiwać, powinno być jednym z Twoich głównych priorytetów. Mam nadzieję, że możesz skorzystać z tej szybkiej i łatwej metody i wkrótce zastosować ją na swojej stronie Divi!



[Ad_2]

Link Źródło