Jak utworzyć szablon strony wyników wyszukiwania w Divi

Wszyscy przyzwyczailiśmy się do korzystania z formularzy wyszukiwania, aby znaleźć to, czego potrzebujemy na stronie internetowej. Tak więc, tworząc stronę internetową w Divi, naprawdę musimy wziąć pod uwagę projekt szablonu wyników strony, który będzie kierował wyglądem tych wyników wyszukiwania.

W tym samouczku omówimy, jak zbudować prosty i elegancki szablon strony wyników wyszukiwania za pomocą Divi Theme Builder. Pokażemy Ci, jak uwzględnić kluczowe elementy szablonu strony wyników wyszukiwania, w tym dynamiczny tytuł strony wyników wyszukiwania i odpowiednią treść wyszukiwania wygenerowaną przez moduł bloga.

Zacznijmy.

zapowiedź

Oto krótki rzut oka na szablon strony wyników wyszukiwania, który będziemy tworzyć.

Pobierz szablon(y) ZA DARMO

Aby położyć swoje ręce na szablonie strony wyników wyszukiwania z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli już jesteś na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ do swojej strony, po prostu rozpakuj plik zip i dodaj jeden z plików json do Divi Theme Builder za pomocą opcji Theme Builder Portability.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz zainstalować i aktywować motyw Divi. Upewnij się, że masz najnowszą wersję Divi.

Potrzebne będą również posty/strony utworzone do celów testowych, aby strona wyników wyszukiwania rzeczywiście wyświetlała wyniki.

Po tym jesteś gotowy do pracy.

Informacje o stronie wyników wyszukiwania

W Divi strona wyników wyszukiwania to strona, na którą użytkownik zostaje przekierowany po wpisaniu zapytania wyszukiwania w jednym z formularzy wyszukiwania Divi. Możliwe zapytania wyszukiwania, które prowadzą do strony wyników wyszukiwania, obejmują formularz wyszukiwania w domyślnym nagłówku Divi, wyszukiwanie wygenerowane z modułu wyszukiwania w Divi Builder oraz widżet wyszukiwania wbudowany w WordPress.

Domyślnie strona wyników wyszukiwania po prostu wyświetla strony lub posty wyszukiwane w kanale, podobnie jak typowa strona bloga. Ale dzięki Divi możesz zaprojektować szablon tak, jak chcesz, korzystając z Divi Theme Builder.

Jak utworzyć szablon strony wyników wyszukiwania w Divi

Utwórz nowy szablon

Aby rozpocząć, przejdź do pulpitu nawigacyjnego WordPress i przejdź do Divi > Kreator motywów. Następnie kliknij obszar „Dodaj nowy szablon”.

W ustawieniach szablonu przypisz szablon Wyniki wyszukiwania.

Następnie kliknij obszar Dodaj niestandardową treść nowego szablonu i wybierz „Zbuduj niestandardową treść”.

Wybierz, aby zbudować układ od podstaw.

Projektowanie szablonu strony wyników wyszukiwania za pomocą Edytora układu szablonu

Sekcja nagłówka szablonu wyników strony

W edytorze układu szablonu rozpocznij projektowanie szablonu, dodając wiersz z jedną kolumną do sekcji domyślnej. W tym miejscu zbudujemy nasz nagłówek strony dla szablonu.

Akcent projektowy modułu rozdzielającego

Następnie włóż moduł rozdzielający. Posłuży to jako akcent projektowy w nagłówku naszej strony.

Zaktualizuj styl dzielnika w następujący sposób:

• Kolor linii: #3a405a
• Pozycja linii: dół
• Waga dzielnika: 5px
• Indeks Z: -1

Moduł tekstowy z nagłówkiem

W module Divider dodaj nowy moduł tekstowy o następującej treści:

<h1>Search Results</h1>

Zaktualizuj projekt tekstu w następujący sposób:

• Kolor tła: #ffffff
• Wyrównanie tekstu: do środka
• Czcionka nagłówka: Muli
• Grubość czcionki nagłówka: Ciężka
• Kolor tekstu nagłówka: #3a405a
• Rozmiar tekstu nagłówka: 70px (komputer), 40px (tablet), 22px (telefon)
• Wysokość linii nagłówka: 80px
• Maksymalna szerokość: 60%
• Wyrównanie modułu: Środek
• Minimalna wysokość: 80px

Teraz możemy przesunąć moduł tekstowy w górę, aby zakrył separator, dodając niestandardowy margines.

• Margines: -75px

Moduł wyszukiwania

Pod modułem tekstowym z nagłówkiem dodaj moduł wyszukiwania. Będzie to przydatne dla użytkowników, którzy chcą kontynuować przeszukiwanie Twojego bloga/witryny po przejściu na stronę wyników wyszukiwania.

Dodaj wejściowy tekst zastępczy dla formularza.

Masz również możliwość wykluczenia określonych stron, postów i/lub kategorii z wyników wyszukiwania, wybierając opcje w grupie opcji wyjątków. Na przykład, jeśli tworzysz formularz wyszukiwania głównie dla swojego bloga, możesz chcieć wykluczyć strony z wyników wyszukiwania, aby wyświetlane były tylko posty na blogu.

Następnie zaktualizuj ustawienia wyszukiwania w następujący sposób:

• Kolor zastępczy: #3a405a
• Kolor tła pola: #ffffff
• Czcionka pola: Montserrat
• Rozmiar tekstu pola: 20px
• Kolor przycisku i obramowania: #3a405a
• Czcionka przycisku: Muli
• Waga czcionki przycisku: pogrubiona
• Kolor tekstu przycisku: #ffffff
• Rozmiar tekstu przycisku: 18px
• Szerokość: 100%
• Maksymalna szerokość: 300px
• Wyrównanie modułu: Środek
• Zaokrąglone rogi: 8px

To w większości zajmuje się naszą sekcją nagłówków.

Dopełnienie wiersza

Zanim zaczniemy następną sekcję, wyjmijmy dolną wyściółkę rzędu.

• Wypełnienie: 0px dół

Tworzenie sekcji treści szablonu wyników wyszukiwania

Teraz jesteśmy gotowi do dodania naszej drugiej sekcji szablonu, która będzie zawierać tytuł archiwum wyników wyszukiwania i zawartość wyników wyszukiwania.

Tworzenie nowej sekcji i wiersza

Pod górną sekcją dodaj nową zwykłą sekcję do układu.

Następnie dodaj do sekcji wiersz z jedną kolumną.

Dodawanie tytułu posta/archiwum jako treści dynamicznej

Strona wyników wyszukiwania skorzysta z tytułu, który wyświetla zapytanie wprowadzone przez użytkownika. Możemy dodać to do strony za pomocą modułu tekstowego i wciągając dynamiczny element treści tytułu posta/archiwum.

Najpierw dodaj moduł tekstowy.

Usuń fikcyjny tekst w polu treści treści i wybierz ikonę Treść dynamiczna, która pojawia się po najechaniu kursorem na pole treści treści. Następnie wybierz z listy tytuł posta/archiwum.

Element Tytuł posta/archiwum zaczyna się od frazy „Wyniki dla”, po której następuje treść wyszukiwania/zapytanie w nawiasie. Poniżej znajduje się przykład tego, co by się pokazało, gdyby użytkownik wyszukał termin „firma”.

Następnie zaktualizuj ustawienia projektu modułu tekstowego w następujący sposób:

• Czcionka tekstu: Muli
• Grubość czcionki tekstu: Ciężka
• Kolor tekstu tekstu: #d30c7b
• Rozmiar tekstu: 22px
• Wyrównanie tekstu: do środka
• Styl animacji: slajd
• Kierunek animacji: w dół
• Intensywność animacji: 250%

Dodana animacja pokaże tytuł wyniku wyszukiwania spod stylu dzielnika „chmura” (dodamy to nieco później). Tak więc za każdym razem, gdy użytkownik wprowadzi nowe zapytanie, tytuł zostanie rozwinięty, aby uzyskać fajny efekt.

Dodaj nowy wiersz

W module Tekst zawierającym element tytułu wpisu/archiwum utwórz nowy jednokolumnowy wiersz.

Dodaj moduł bloga do wiersza. Spowoduje to wyświetlenie rzeczywistych postów/treści strony wyników wyszukiwania.

Zaktualizuj ustawienia treści modułu bloga w następujący sposób:

• Posty na bieżącą stronę: TAK
• Liczba postów: 9
• Długość fragmentu: 120
• Pokaż autora: NIE

Najważniejszą opcją jest tutaj Posty dla bieżącej strony. Musi być ona aktywna, aby strona wyników wyszukiwania wyświetlała dynamiczną treść wyszukiwania.

Następnie zaktualizuj projekt modułu bloga w następujący sposób:

• Układ: Siatka
• Czcionka tytułu: Muli
• Grubość czcionki tytułu: Ultra Bold
• Kolor tekstu tytułu: #3a405a
• Rozmiar tekstu tytułu: 24px
• Wysokość wiersza tytułu: 1,3 em
• Czcionka ciała: Montserrat
• Kolor tekstu ciała: #3a405a
• Zaokrąglone rogi układu siatki: 10px
• Szerokość obramowania układu siatki: 0px
• Cień pudełka: pokaż zrzut ekranu
• Pozycja pionowa cienia pudełka: 0px
• Siła rozmycia cieni w pudełku 15px
• Siła rozprzestrzeniania się cieni w pudełku: -5px

Następnie zaktualizuj styl paginacji w następujący sposób:

Tło sekcji i podział

Jako ostatni szlif projektu zaktualizuj ustawienia przekroju w następujący sposób:

• Kolor tła: #eeeeee
• Styl Top Divider: patrz zrzut ekranu
• Kolor dzielnika: #ffffff
• Przerzucanie dzielnika: pionowe
• Układ rozdzielający: na górze treści sekcji
• Wypełnienie: góra 100px

Ostateczny wynik

Oto ostateczny wynik szablonu strony podczas wyszukiwania hasła „biznes” w działającej witrynie.

Oto projekt na tablecie i telefonie.

A oto przykład animacji tytułu wyników wyszukiwania podczas korzystania z formularza wyszukiwania dla dodatkowych zapytań na stronie wyników wyszukiwania.

Końcowe przemyślenia

Strona wyników wyszukiwania może być przydatnym narzędziem dla użytkowników, dlatego warto poświęcić jej uwagę, na jaką zasługuje. Dzięki Divi możesz utworzyć szablon wyników wyszukiwania ze wszystkimi niezbędnymi elementami dynamicznymi za pomocą Divi Visual Builder podczas projektowania szablonu. Nie jest wymagana znajomość kodu. Mam nadzieję, że zainspiruje Cię to do stworzenia niestandardowego szablonu strony wyników wyszukiwania dla własnego bloga lub witryny.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!