Korzystając z modułu wyszukiwania, możesz umieścić forma szukaj w dowolnym miejscu na swojej stronie. Ten forma search pozwoli odwiedzającym przeszukiwać całą zawartość witryny, w tym wszystkie strony i posty na blogu. Daje to funkcjonalność widżetu wyszukiwania WordPress z elastycznością oferowaną przez Divi Builder. Możesz nie tylko kontrolować lokalizację formularze wyszukać na stronie, ale także dostosować jej wygląd.
Jak dodać moduł wyszukiwania do swojej strony
Zanim będziesz mógł dodać moduł wyszukiwania do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów 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 także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.
Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.
Znajdź moduł wyszukiwania na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że możesz także 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: dodawanie modułu wyszukiwania niestandardowego do strony bloga o pełnej szerokości
W tym przykładzie pokażę, jak dodać moduł wyszukiwania, który będzie głównym wezwaniem do działania u góry strony bloga. Dzięki temu użytkownicy mogą łatwo przeszukiwać zawartość Twojego bloga bez bałaganu.
Ta strona ma nagłówek o pełnej szerokości na górze, a moduł wyszukiwania bezpośrednio poniżej. Poniżej modułu wyszukiwania znajduje się moduł blogu wykorzystujący układ siatki.
Korzystając z programu Visual Builder, dodaj nową standardową sekcję do strony bloga z wierszem o pełnej szerokości (1 kolumna). Następnie wstaw moduł wyszukiwania do wiersza.
Zaktualizuj ustawienia modułu wyszukiwania w następujący sposób:
Opcje zawartości
Tekst zarezerwowany: Przeszukaj nasz blog ...
Ukryj przycisk: TAK
Opcje projektowania
Kolor tła pola wejściowego: # f8f8f8
Kolor zastępczy: # 888888
Rozmiar czcionki wejściowej: 16 pikseli
Kolor tekstu wejściowego: # 888888
Wysokość linii wprowadzania: 1em
Niestandardowe wypełnienie: góra 20px, dół 20px
Zapisz ustawienia
Teraz wróć, aby zmienić szerokość wiersza zawierającego moduł wyszukiwania. Na karcie Projekt w ustawieniach linii nadaj linii niestandardową szerokość 300 pikseli. Dzięki temu moduł wyszukiwania będzie zwarty i skoncentrowany na stronie.
To wszystko!
Wyszukaj opcje treści
W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.
Tekst zastępczy
Wpisz tekst, który chcesz użyć jako symbol zastępczy w polu 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 łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.
Wyszukaj opcje projektu
Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiary i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektowych, których można użyć do ulepszenia czegokolwiek.
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 znajduje się w polu. Jeśli dostosowałeś kolor tła pola, możesz również 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 na jasnym tle, tekst powinien być ciemny.
Orientacja tekstu
To kontroluje sposób wyrównywania tekstu w module.
Policja wjazdowa
Możesz zmienić czcionkę tekstu wejściowego, wybierając żądaną czcionkę z menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.
Wprowadź rozmiar czcionki
Tutaj możesz dostosować rozmiar wprowadzanego tekstu. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Kolor tekstu wejściowego
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu wejściowego, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Odstępy między literami
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście wejściowym, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Wysokość linii
Wysokość linii wpływa na odstęp między poszczególnymi wierszami tekstu wejściowego.Jeśli chcesz zwiększyć odstęp między wierszami, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu. wpis po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości 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 menu rozwijanego. Divi zawiera dziesiątki wspaniałych czcionek obsługiwanych przez Google Fonts. Domyślnie Divi używa czcionki Open Sans dla całego tekstu na Twojej stronie. Możesz także dostosować styl tekstu, używając pogrubienia, kursywy, wielkich liter i opcji podkreślenia.
Rozmiar czcionki przycisku
Tutaj możesz dostosować rozmiar tekstu przycisku. Możesz przeciągnąć suwak zakresu, aby zwiększyć lub zmniejszyć rozmiar tekstu, lub bezpośrednio wprowadzić wartość żądanego rozmiaru tekstu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Kolor tekstu przycisku
Domyślnie wszystkie kolory tekstu w Divi są wyświetlane w kolorze białym lub ciemnoszarym. Jeśli chcesz zmienić kolor tekstu przycisku, wybierz żądany kolor z próbnika kolorów za pomocą tej opcji.
Rozstawianie liter przycisku
Odstępy między literami wpływają na odstępy między każdą literą. Jeśli chcesz zwiększyć odstęp między każdą literą w tekście przycisku, użyj suwaka zakresu, aby dostosować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania po prawej stronie suwaka. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości rozmiaru, aby zmienić typ jednostki.
Wysokość linii przycisku
Wysokość linii wpływa na odstęp pomiędzy każdą linią tekstu przycisku Jeśli chcesz zwiększyć odstęp pomiędzy każdą linią, użyj suwaka zakresu aby wyregulować odstęp lub wprowadź żądany rozmiar odstępu w polu wprowadzania znajdujący się po prawej stronie kursora. Pola wejściowe obsługują różne jednostki miary, co oznacza, że możesz wpisać „px” lub „em” w zależności od wartości 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 z naturalną szerokością, chyba że szerokość paska wyszukiwania przekracza 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ą wartość szerokości. 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, między modułem a następnym elementem powyżej, poniżej lub po lewej i prawej stronie. Możesz dodać niestandardowe wartości marginesów do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.
Niestandardowe wypełnienie
Wypełnienie to przestrzeń dodana wewnątrz modułu, pomiędzy krawędzią modułu a jego elementami wewnętrznymi. Możesz dodać niestandardowe wartości dopełnienia do dowolnej z czterech stron modułu. Aby usunąć niestandardowy margines, usuń wartość dodaną z pola wejściowego. Domyślnie wartości te są mierzone w pikselach, ale w polach wejściowych można wprowadzić niestandardowe jednostki miary.
Zaawansowane opcje modułu badawczego
Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.
Identyfikator CSS
Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.
Klasa CSS
Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.
Niestandardowy CSS
Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.
widoczność
Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.
[vc_row center_row = "tak"] [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"] POBIERZ TEMAT DIVI [/ vcex_button] [/ vc_column] »vc_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 "] POBIERZ SZABLONY DIVI [/ vcex_button] [/ vc_column] [/ vc_row]
Inne samouczki Divi
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Witam,
Dziękuję za ten artykuł.
Jest kwestia, do której nie odniosłeś się (i niestety jest to dokładnie ten punkt, który sprawia mi problem ...):
Wybierając opcję wyświetlania przycisku wyszukiwania, domyślnie tekst przycisku to „Szukaj” i chciałbym wiedzieć, w jaki sposób mogę zmodyfikować ten tekst, aby go spersonalizować? Bez względu na to, jak bardzo się przyjrzałem, nie znalazłem żadnego pola ani przestrzeni, w której można by dokonać tej zmiany ...
Z góry dziękuje za twoją pomoc !
Cześć, dzięki za artykuł. Mam pytanie, czy formularz wyszukiwania może być używany tylko do sekcji strony? na przykład dla działu FAQ chciałbym ustawić wyszukiwarkę ograniczoną tylko do pytań z FAQ (+ 20 pytań) w ten sposób użytkownik nie musi ich czytać, 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ź.
Dziękuję za ten artykuł, miło usunąć strony z modułu wyszukiwania, ale czy możesz też wykluczyć strony podczas wyszukiwania z lupą w nagłówku? Dziękuję Ci
Cześć David,
Nie testowałem jeszcze tej opcji.