Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu wyszukiwania

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecana]

Korzystając z modułu wyszukiwania, możesz umieścić formularz wyszukiwania w dowolnym miejscu na swojej stronie. Ten formularz wyszukiwania umożliwia odwiedzającym przeszukiwanie całej zawartości witryny, w tym wszystkich stron i postów na blogu. Daje to funkcjonalność widgetu wyszukiwania WordPress z elastycznością, jaką oferuje Divi Builder. Możesz nie tylko kontrolować lokalizację formularzy wyszukiwania na stronie, ale także dostosować jej wygląd.

Jak dodać moduł wyszukiwania do swojej strony

Zanim dodasz moduł wyszukiwania do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi w witrynie zauważysz przycisk Użyj Divi Builder nad wydawcą za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz również kliknąć przycisk Użyj Visual Builder kiedy przeglądasz swoją witrynę na pierwszym planie, jeśli jesteś podłączony do pulpitu WordPress.

divi budowniczy

Po wprowadzeniu programu Visual Builder można kliknąć szary przycisk plus, aby dodać nowy moduł do strony. Nowe moduły można dodawać tylko w rzędach. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać linii do swojej strony.

divi.png moduł badawczy

Zlokalizuj moduł wyszukiwania na liście modułów i kliknij, aby dodać go do swojej strony. Lista modułów jest dostępna do przeszukiwania, co oznacza, że ​​możesz również wpisać słowo "szukaj", a następnie kliknąć enter, aby wyszukać i automatycznie dodać moduł wyszukiwania! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: Dodanie modułu wyszukiwarki niestandardowej do strony o pełnej szerokości strony

W tym przykładzie pokażę, jak dodać moduł wyszukiwania do głównego wezwania do działania u góry strony bloga. Dzięki temu użytkownicy mogą łatwo przeszukiwać zawartość blogu bez zbędnych elementów.

Ta strona ma nagłówek pełnej szerokości u góry, a moduł wyszukiwania znajduje się bezpośrednio pod nim. W module wyszukiwania znajduje się moduł blogu wykorzystujący układ siatki.

przykładowy blog z wyszukiwarką divi.jpg

Przy użyciu programu Visual Builder, dodać nową sekcję do standardowej strony bloga z linii pełnej szerokości (kolumna 1). Następnie wstaw moduł wyszukiwania do wiersza.

Zaktualizuj ustawienia modułu wyszukiwania w następujący sposób:

Opcje zawartości

Zarezerwowany tekst: Przeszukaj nasz blog ...
Ukryj przycisk: TAK

Opcje projektowania

Kolor tła pola wejściowego: # f8f8f8
Kolor symbolu zastępczego: # 888888
Wprowadź rozmiar czcionki: 16px
Kolor tekstu wejściowego: # 888888
Wysokość linii wejściowej: 1em
Custom Padding: 20px Top, 20px Bottom

divi search configuration content.png

Zapisz ustawienia

Teraz wróć, aby zmienić szerokość linii zawierającej moduł wyszukiwania. Na karcie Projektowanie parametrów linii ustaw linię na niestandardową szerokość 300 px. Dzięki temu moduł wyszukiwania będzie kompaktowy i wyśrodkowany na stronie.

Łatwo stwórz swoją stronę internetową z Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestańcie słono płacić za to, co możecie zrobić sami. [Bezpłatny]

konfiguracja szerokość divi.png

To wszystko!

Wyszukaj opcje treści

Na karcie treści znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko, co kontroluje co pojawia się w twoim module zawsze znajdzie się na tej karcie.

moduł search divi contenu.png

Tekst zastępczy

Wpisz tekst, który chcesz użyć jako symbol zastępczy dla pola wyszukiwania.

Ukryj przycisk

Jeśli włączysz tę opcję, przycisk Szukaj zostanie ukryty.

Wyklucz strony

Jeśli włączysz tę opcję, strony zostaną wykluczone z wyników wyszukiwania.

Wyklucz pozycje

Włączenie tej opcji spowoduje wykluczenie wiadomości z wyników wyszukiwania.

Wyklucz kategorie

Wybierz kategorie, które chcesz wykluczyć z wyników wyszukiwania.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu ułatwienia identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułów interfejsu Divi Builder.

Wyszukaj opcje projektu

Na karcie Projektowanie znajdują się wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest karta, której użyjesz, aby zmienić wygląd swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do modyfikowania czegokolwiek.

divi search design.png

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress z Envato i łatwo stwórz swoją stronę internetową. Już ponad 49.720.000 XNUMX XNUMX pobrań. [EXCLUSIVE]

Kolor tła pola wejściowego

Tutaj możesz zmienić kolor tła paska wyszukiwania.

Kolor zastępczy

Przed użyciem pola wyszukiwania tekst zastępczy istnieje wewnątrz pola. Jeśli dostosowałeś kolor tła pola, możesz także dostosować kolor tekstu zastępczego, aby upewnić się, że jest czytelny.

Kolor tekstu

Tutaj możesz wybrać wartość swojego tekstu. Jeśli pracujesz na ciemnym tle, tekst powinien być włączony. Jeśli pracujesz z czystym tłem, twój tekst powinien być ciemny.

Orientacja tekstu

Kontroluje to sposób wyrównania tekstu w module.

Czcionka wpisu

Możesz zmienić czcionkę tekstu wejściowego, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki wejściowej

Tutaj możesz dostosować rozmiar wprowadzanego tekstu. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wprowadź kolor tekstu

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor wprowadzanego tekstu, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Odstępy między literami

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście wejściowym, użyj suwaka zasięgu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii

Wysokość linii wpływa na przestrzeń między wierszami tekstu wejściowego. Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zasięgu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu. wpisane po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor przycisku i obramowania

Spowoduje to zmianę tła i koloru obramowania przycisku wyszukiwania.

Czcionka przycisku

Możesz zmienić czcionkę tekstu przycisku, wybierając żądaną czcionkę z rozwijanego menu. Divi zawiera dziesiątki dużych czcionek z czcionkami Google. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na twojej stronie. Możesz także dostosować styl tekstu za pomocą pogrubienia, kursywy, wielkich i podkreślonych opcji.

Rozmiar czcionki przycisku

Tutaj możesz dostosować rozmiar tekstu swojego przycisku. Możesz przeciągnąć suwak zasięgu, aby zwiększyć lub zmniejszyć rozmiar tekstu lub wpisać wartość żądanego rozmiaru tekstu bezpośrednio do pola wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Kolor tekstu przycisku

Domyślnie wszystkie kolory tekstu Divi są wyświetlane jako białe lub ciemnoszare. Jeśli chcesz zmienić kolor tekstu przycisku, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.

Rozstawianie liter przycisku

Odstępy liter wpływają na przestrzeń między każdą literą. Jeśli chcesz zwiększyć odstęp między literami w tekście przycisku, użyj suwaka zasięgu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Wysokość linii przycisku

Wysokość linii wpływa na przestrzeń między wierszami tekstu przycisku Jeśli chcesz zwiększyć odstęp między liniami, użyj suwaka zakresu, aby dostosować spację lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajduje się po prawej stronie kursora. Pola wprowadzania obsługują różne jednostki miary, co oznacza, że ​​możesz wpisać "px" lub "em" w zależności od wartości twojego rozmiaru, aby zmienić typ jednostki.

Maksymalna szerokość

Domyślnie maksymalna szerokość paska wyszukiwania jest ustawiona na 100%. Oznacza to, że pasek wyszukiwania będzie wyświetlany na naturalnej szerokości, chyba że szerokość paska wyszukiwania przekroczy szerokość kolumny nadrzędnej, w którym to przypadku pasek wyszukiwania będzie ograniczony do 100% szerokości kolumny. Jeśli chcesz dodatkowo ograniczyć maksymalną szerokość paska wyszukiwania, możesz to zrobić, wprowadzając tutaj żądaną maksymalną szerokość. Na przykład wartość 50% ograniczy szerokość paska wyszukiwania do 50% szerokości kolumny nadrzędnej.

Margines niestandardowy

Margines to przestrzeń dodana na zewnątrz modułu, pomiędzy modułem a następnym elementem powyżej, poniżej lub z lewej i prawej strony. Możesz dodać niestandardowe wartości marginesów do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

Niestandardowe dopełnienie

Wypełnienie to przestrzeń dodana wewnątrz modułu, między krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości wypełnienia do jednej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie te wartości są mierzone w pikselach, ale można wprowadzić niestandardowe jednostki miary w polach wejściowych.

Łatwo stwórz swój sklep internetowy

Pobierz bezpłatne WooCommerce, najlepsze wtyczki e-commerce do sprzedaży fizycznych i cyfrowych produktów na WordPress. [Zalecana]

Zaawansowane opcje modułu badawczego

Na karcie Zaawansowane znajdziesz opcje, które bardziej doświadczeni projektanci stron internetowych mogą okazać się przydatni, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Do modułu można również zastosować niestandardowe klasy i identyfikatory CSS, które można wykorzystać do dostosowania modułu w pliku style.css kompozycji podrzędnej.

divi advanced option module search.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do poszczególnych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Do utworzenia niestandardowego stylu CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Te klasy mogą być używane w Twoim dziecięcym motywie Divi lub niestandardowym arkuszu stylów CSS dodawanym do strony lub witryny internetowej przy użyciu opcji motywu Divi lub ustawień strony Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Custom CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Pozycje CSS w tych parametrach są już zapakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się twój moduł. Możesz wyłączyć moduł na tabletach, smartfonach lub pulpitach indywidualnie. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub jeśli chcesz uprościć projektowanie mobilne, eliminując pewne elementy strony.

Inne samouczki Divi

Ten artykuł zawiera komentarze 3
  1. Cześć, dzięki za artykuł. Mam pytanie, czy z formularza wyszukiwania można korzystać tylko w przypadku części strony? na przykład w sekcji FAQ chciałbym skonfigurować formularz wyszukiwania ograniczony tylko do pytań z FAQ (+ 20 pytań), w ten sposób użytkownik nie musi czytać ich wszystkich, ale znajduje tylko dzięki formularzowi wyszukiwania te ze słowami kluczowymi, na których mu zależy. Z góry dziękuję za odpowiedź.

  2. Dziękuję za ten artykuł, miło usunąć strony z modułu wyszukiwania, ale czy możemy również wykluczyć strony, gdy przeprowadzamy wyszukiwanie za pomocą lupy nagłówka? Dziękuję Ci

Zostaw komentarz

Twoj adres e-mail nie bedzie opublikowany. Pola obowiązkowe są oznaczone symbolem *

Ta strona używa Akismet do redukcji spamu. Dowiedz się więcej o tym, jak wykorzystywane są Twoje opinie.

Powrót do góry
20 akcji
udział12
ćwierkanie2
Enregistrer6