Tworzenie witryny z recenzjami produktów z dodatkiem – część 3

Witamy w trzeciej części tej 4-częściowej serii poświęconej tworzeniu witryny z recenzjami produktów za pomocą programu Extra. Jeśli zastanawiasz się, jak rozpocząć tworzenie witryny z recenzjami produktów, ta seria jest dla Ciebie. Dzięki wbudowanej funkcji recenzji i inteligentnej kategoryzacji postów, Extra jest specjalnie przystosowana do tworzenia świetnie wyglądających recenzji, szablonów postów o produktach, mega menu i układów kategorii w ciągu kilku minut. Dołącz do mnie, gdy odkryjemy moc Extra.

W drugiej części tej serii stworzyliśmy nasz szablon wpisu z recenzją produktu, korzystając z wbudowanych ustawień Extra i narzędzia Visual Builder. Dzięki nowemu szablonowi postów mogłeś dodawać kolejne posty i przypisywać je do odpowiednich kategorii.

Dzisiaj zbudujemy dwa układy kategorii za pomocą kreatora kategorii Extra. Pierwszy układ wyświetli posty/recenzje produktów na Twojej stronie głównej, podkreślając najnowsze i popularne recenzje. Drugi układ pokaże wszystkie kategorie na jednej stronie za pomocą modułu suwaka karuzeli. Po ukończeniu tego samouczka będziesz mieć dobrą podstawę do dobrze zaprojektowanej witryny z recenzjami produktów.

Oto zajawka tego, co zamierzamy zbudować

Przygotowanie elementów projektu

Ponieważ układy kategorii w dużej mierze zależą od treści postów, upewnij się, że dodajesz wystarczającą liczbę postów, abyś mógł poczuć, jak witryna będzie wyglądać po dodaniu własnej treści. Jak omówiono w części 2 tej serii, moje układy kategorii zawierają 4 kategorie i 3 produkty w każdej kategorii. Używam obrazów stockowych z Shutterstock do polecanych obrazów moich postów.

Aby zaprojektować układ kategorii, użyjemy Kreatora kategorii Extra i trochę niestandardowego CSS.

Zacznijmy.

Tworzenie witryny z recenzjami produktów z dodatkiem – część 3

Subskrybuj nasz kanał YouTube

Tworzenie układu kategorii na stronie głównej

Domyślnie extra używa układu kategorii na stronie głównej. Aby utworzyć niestandardowy układ, z paska bocznego pulpitu WordPress przejdź do Extra > Category Building . Znajdź układ kategorii już tam o nazwie „strona główna”, a następnie najedź na niego i wybierz edytuj.

Następnie kliknij "Wyczyść układ" w fioletowym menu konstruktora, aby usunąć bieżący domyślny układ.

Teraz możemy zacząć budować nasz niestandardowy układ. Zacznij od dodania dwóch trzecich jednej trzeciej kolumny do wiersza w sekcji standardowej.

W lewej (dwie trzecie) kolumnie dodaj suwak Polecane posty.

Zaktualizuj ustawienia modułu suwaka Polecane posty w następujący sposób:

W zakładce Treść…

Kategorie: Wszystkie
Wyświetlaj tylko polecane posty: [Wyłączyłbym tę opcję, dopóki nie zdecydujesz, które posty chcesz wyróżnić. Możesz oznaczyć określony post jako polecany w polu Dodatkowe ustawienia na stronie edytora postów.]
Pokaż autora: WYŁ
Pokaż datę: WYŁ

W zakładce Projekt…

Kolor strzałki nawigacyjnej: #ffffff
Tło strzałki nawigacyjnej: #000000
Tło podpisu: rgba (255,255,255,0.4)
Tytuł Rozmiar czcionki: 24px
Kolor tekstu tytułu: #000000
Rozmiar czcionki meta: 16px
Kolor tekstu meta: #000000
Margines niestandardowy: dolny 0px

W zakładce Zaawansowane…

Wprowadź następujący niestandardowy kod CSS w polu tekstowym elementu głównego:

border: none !important;
-webkit-box-shadow: none !important;
-moz-box-shadow: none !important;
box-shadow: none !important;
margin-bottom: 0px !important;

Zapisz ustawienia

Teraz dodaj moduł tekstowy do prawej (jednej trzeciej) kolumny i zaktualizuj ustawienia modułu tekstowego w następujący sposób:

W zakładce Treść dodaj następujący kod HTML do zakładki tekstowej pola treści:

<h1>Get the Latest Reviews on Popular Products</h1>

<a class="join-cta" href="/reviews" target="_blank">Click to Join</a>

Link tutaj ma służyć jako pozorowany przycisk CTA. Możesz go używać w dowolny sposób. Po prostu zaktualizuj adres URL i tekst linku.

Wskazówka : możesz użyć Blooma, aby wywołać wyskakujące okienko z opcją wyboru e-maila po kliknięciu tego CTA. W ten sposób odwiedzający będą mogli pozostać na bieżąco z produktami dzięki Twojej kampanii e-mail marketingowej. Aby to zrobić, musisz zainstalować Bloom, dodać wyskakujący formularz i zintegrować swojego dostawcę poczty e-mail. Następnie wybierz wyświetlanie wyskakującego okienka po kliknięciu selektora CSS „a.join-cta”, który odpowiada klasie linku w powyższym kodzie HTML.

Możesz również przeczytać więcej o tym, jak wywołać wyskakujące okienko formularza optin bloom po kliknięciu przycisku.

Teraz wróć do ustawień modułu tekstowego.

W zakładce Projekt…

Rozmiar czcionki tekstu: 40px (komputer), 24px (tablet i smartfon)
Rozmiar czcionki nagłówka: 42px (komputer), 38px (tablet), 28px (smartfon)
Niestandardowe dopełnienie: 40px (góra), 15px (prawo), 15px (dół), 15px (lewo)

Zapisz ustawienia

Teraz przejdź do Ustawień wiersza , abyśmy mogli stylizować tło wiersza.

Następnie zaktualizuj następujące elementy:

W zakładce Treść…

Tło: #ffffff

W zakładce Projekt…

Ustaw pełną szerokość tego wiersza: TAK
Wyrównaj wysokości kolumn: TAK

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do pola wejściowego elementu głównego:

border-top: 10px solid #121212;
border-radius: 3px;
-webkit-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
-moz-box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);

Zapisz ustawienia

Sprawdź teraz sekcję z niestandardowymi polecanymi suwakami.

Jak dotąd wygląda dobrze.

Kontynuujmy. Wróć do Kreatora kategorii i dodaj standardową sekcję poniżej bieżącej sekcji i dodaj jednokolumnowy wiersz z modułem tekstowym.

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

Na karcie Treść dodaj ten nagłówek HTML na karcie tekstowej pola treści:

<h1 class="subtitle fancy"><span>Product Reviews</span></h1>

W zakładce Projekt…

Orientacja tekstu: Środek
Czcionka nagłówka: B (pogrubiona)
Rozmiar czcionki nagłówka: 48px (komputer), 42px (tablet), 36px (smartfon)

Zapisz ustawienia

Będzie to tytuł sekcji poniżej, w której będą wyświetlane Twoje recenzje produktów.

Następnie dodaj sekcję specjalistyczną z następującą strukturą kolumny trzy czwarte jedna czwarta:

W lewej (trzy czwarte) sekcji dodaj wiersz z dwiema kolumnami.

W lewej kolumnie tego wiersza dodaj moduł postów

Następnie zaktualizuj ustawienia modułu postów w zakładce Treść, przypisując kategorię do modułu. W ten sposób moduł postów pokaże tylko tę kategorię. Aby to zrobić, wybieram „Odzież” jako moją kategorię.

Następnie zaktualizuj następujące elementy:

Pokaż autora: NIE
Pokaż datę: NIE

Zapisz ustawienia

Powiel ten moduł postów, aby mieć dwa moduły postów ułożone w stos w lewej kolumnie i 2 w prawej.

Następnie zaktualizuj ustawienia w każdym module o inną kategorię. Kategorie, które mam to Odzież, Elektronika, Kuchnia oraz Zdrowie i fitness.

Jeśli chcesz dodać moduł postów, który wyświetla recenzje wideo, możesz dodać go tutaj. Najpierw musisz dodać nową kategorię postów o nazwie Wideo, przypisać kategorii kolor #222222. Następnie utwórz nowy post, wybierz „Wideo” dla formatu i dodaj adres URL wideo do wbudowanego okna opcji formatu wideo dodatku.

Następnie możesz dodać zawartość pola recenzji, aby wyświetlić ją pod filmem.

Po przesłaniu kilku filmów dodaj je do kategorii Wideo. Następnie wróć do Kreatora kategorii dla swojej strony głównej i dodaj jednokolumnowy wiersz pod wierszem zawierającym cztery moduły postów. Następnie zduplikuj moduł postów z poprzedniego wiersza i dodaj do nowego wiersza. W ustawieniach modułu postów na karcie Treść wybierz kategorię „Wideo”. Teraz masz moduł postów, który będzie wyświetlał filmy.

W prawym (pasku bocznym) obszaru sekcji specjalności dodamy dwa kolejne moduły postów ułożone jeden na drugim.

W przypadku pierwszego zaktualizuj ustawienia modułu postów, aby zawierały „Wszystkie” kategorie. Następnie wybierz metodę sortowania „Najwyższa ocena”.

Zduplikuj ten moduł postów tak, aby inny układał się pod nim. Następnie zaktualizuj metodę sortowania w tym przypadku na „Najpopularniejszy”.

Śmiało i zaktualizuj wpis, aby zapisać ustawienia. Oto jak układ powinien wyglądać do tej pory.

Następnie zduplikuj (lub skopiuj) drugą główną sekcję zawierającą moduł tekstowy o tytule „Recenzje produktów”.

Następnie przeciągnij (lub wklej) zduplikowaną sekcję pod sekcją specjalistyczną. W nowej sekcji zaktualizuj zawartość Ustawienia modułu tekstowego o następujący kod HTML:

<h2 class="subtitle fancy"><span>Latest Reviews</span></h2>

Zapisz ustawienia

Następnie dodamy kanał na blogu, w którym będą wyświetlane wszystkie recenzje produktów, począwszy od najnowszych.

Pod właśnie zaktualizowanym modułem tekstowym dodaj do kolumny moduł Blog Feed Masonry. W ustawieniach modułu masonry kanału blogu, pod zakładką Treść, wybierz wszystkie kategorie, które mają być wyświetlane w źródle.

Zapisz ustawienia

I na koniec, pod modułem Blog Feed Masonry, dodaj moduł karuzeli postów. Zaktualizuj ustawienia modułu karuzeli postów na karcie Treść, aby uwzględnić wszystkie kategorie i wybierz TAK, aby wyświetlić tylko polecane posty.

Ta karuzela jest przeznaczona do wyświetlania tylko postów wybranych jako polecane podczas tworzenia postów z recenzjami produktów.

Zobaczmy teraz, jak wygląda ostateczny układ.

Dodawanie kilku linii niestandardowego CSS

Aby połączyć projekt, musimy dodać kilka linijek niestandardowego CSS. Przejdź do Theme Customizer > Dodatkowy CSS i dodaj następujące elementy u góry bieżącego kodu CSS, który już tam jest:

.et_pb_extra_module, .posts-blog-feed-module.masonry .hentry {
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.12), 1px 0 2px 0 rgba(0,0,0,0.12), 0 1px 1px 0 rgba(0,0,0,0.24);
border-top: 10px solid;
}

Następnie w nawiasach zapytania o media o minimalnej szerokości 980 pikseli dodaj następujące elementy:

.join-cta {
display: block;
text-align: center;
border: 3px solid #333;
color: #333;
padding: 20px 15px;
text-transform: uppercase;
font-weight: 600;
font-size: 30px;
}

Pierwszy fragment kodu CSS dodaje do modułów nieco ciemniejszy cień i wyższą górną ramkę. Drugi dostosowuje przycisk „Dołącz teraz” w górnej sekcji.

Cóż, to tyle, jeśli chodzi o układ kategorii strony głównej. Oto jak wygląda efekt końcowy:

Oprócz układu kategorii na stronie głównej dodajmy jeszcze jeden prosty układ, aby wyświetlić wszystkie nasze kategorie na jednej stronie.

Budowanie układu „Wszystkie kategorie”

Ten układ jest naprawdę prosty do stworzenia teraz, gdy masz załadowane wszystkie swoje posty, ustawione kategorie i stylizację motywu. Celem tego układu jest stworzenie strony, która wyświetla wszystkie kategorie i produkty na jednej stronie. Można to zrobić na wiele różnych sposobów, ale w przypadku Extra chciałem skorzystać z modułu karuzeli postów, aby wyświetlić kategorie i posty w układzie podobnym do tego, który można zobaczyć w witrynach do strumieniowego przesyłania wideo, takich jak Hulu i Netflix.

Aby dodać układ, przewiń do góry bieżącego układu kategorii i wybierz Dodaj nowy. Za pomocą Konstruktora kategorii dodaj jednokolumnowy wiersz do standardowej sekcji. Następnie dodaj moduł tekstowy do wiersza. Zaktualizuj ustawienia modułu tekstowego pod zakładką Treść, aby w polu treści znalazł się następujący znacznik h1:

<h1 class="subtitle fancy"><span>All Categories</span></h1>

Zapisz ustawienia

Następnie dodaj moduł karuzeli postów pod modułem tekstowym. W ustawieniach modułu karuzeli postów wybierz Ubrania jako kategorię.

Zapisz ustawienia

Następnie dodaj moduł tekstowy w karuzeli postów kategorii Odzież. W ustawieniach modułu tekstowego dodaj następujący link do pola Treść w zakładce Treść:

<a href="/category/clothing">view all clothing reviews</a>

Adres URL i/lub tekst linku może wymagać zmiany w zależności od Twojej witryny, ale chodzi o link do strony kategorii dla tej konkretnej kategorii, aby wyświetlić wszystkie recenzje produktów dla tej kategorii.

Na karcie Projekt zmień orientację tekstu na „Prawo”.

Zapisz ustawienia

Aby wyświetlić kolejne trzy kategorie w ten sam sposób, powtórz proces dodawania modułu karuzeli postów przypisanego do określonej kategorii, a następnie modułu tekstowego zawierającego link do odpowiedniej strony kategorii.

W polu kategorii po prawej stronie kreatora dodaj nową kategorię o nazwie „Wszystkie kategorie” i wybierz ją dla tego układu. W ten sposób za każdym razem, gdy łączymy się ze stroną kategorii „Wszystkie kategorie”, ten szablon zostanie wyświetlony.

Ostateczny układ powinien wyglądać tak po zakończeniu.

A oto jak wygląda układ kategorii na stronie.

Możesz to teraz stwierdzić, ponieważ nie mamy jeszcze wielu dodanych produktów, ale w końcu będzie to wygodny sposób na przemieszanie produktów dla każdej kategorii za pomocą modułu suwaka karuzeli postów.

To tyle na dzisiejszy post. Mam nadzieję, że podobała Ci się trzecia część tej czteroczęściowej serii poświęconej tworzeniu witryny z recenzjami produktów za pomocą Extra.

Mam nadzieję, że jeszcze się nie zmęczyłeś, mamy jeszcze jeden post w naszej serii.

Nadchodzi

W ostatnim poście z naszej serii dostosujemy nagłówek i elementy nawigacyjne naszej witryny z recenzjami produktów. Oprócz tworzenia Twojego menu, pokażę Ci fajny sposób przypisywania kolorów do linków menu, które odpowiadają kolorom kategorii w całej witrynie. Pokażę Ci również, jak za pomocą kilku kliknięć zbudować mega menu.

Z niecierpliwością czekam na wspólne zbudowanie ostatniej części naszej strony internetowej.

Jak zawsze, zachęcamy do przesyłania komentarzy poniżej.