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.

divi budowniczy

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.

divi.png moduł badawczy

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.

przykładowy blog z wyszukiwarką divi.jpg

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

divi search configuration content.png

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.

konfiguracja szerokość divi.png

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.

moduł search divi contenu.png

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.

divi search design.png

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.

divi Advanced Option module search.png

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