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

Witamy w drugiej 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 pierwszej części tej serii rozpoczęliśmy naszą podróż tworzenia witryny z recenzjami produktów od skonfigurowania opcji motywu i ustawień dostosowywania motywu.

Dzisiaj zamierzamy ruszyć z miejsca, dodając naszą pierwszą recenzję produktu jako nowy post i dostosowując układ postu dla tego postu za pomocą Divi Builder i dodatkowych ustawień motywu. Po ukończeniu tego samouczka będziesz mieć zapisany szablon posta, który możesz pobrać z biblioteki, aby z łatwością utworzyć resztę swoich postów.

Oto zajawka tego, co zamierzamy zbudować

Przygotowanie elementów projektu

Ponieważ będziemy dodawać nasze produkty w tej części serii, będziesz potrzebować zdjęć produktów. W tym samouczku będę miał 4 kategorie z 3 produktami w każdej kategorii, więc użyję w sumie 12 obrazów. Używam zdjęć stockowych z Shutterstock z białym tłem, aby nadać mu bardziej przejrzysty wygląd.

Aby zaprojektować układ postu, użyjemy Visual Builder i trochę niestandardowego CSS.

Zacznijmy.

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

Subskrybuj nasz kanał YouTube

Dodawanie pierwszej recenzji produktu jako nowego posta

W panelu WordPress przejdź do Wpisy > Dodaj nowy .

Każdy post będzie twoją recenzją produktu, więc nazwa twojego postu powinna być nazwą twojego produktu. Ponieważ mój produkt będzie monitorem kondycji, jako tytuł posta wpiszę „Fitness Tracker”.

Uwaga : jeśli jeszcze tego nie zrobiłeś, teraz jest dobry moment, aby ustawić ustawienia permalinku na opcję „Nazwa posta”, aby Twój adres URL zawierał tylko nazwę produktu (oczywiście Twoje preferencje).

Następnie kliknij przycisk "Użyj Divi Builder", a następnie przycisk "Użyj Visual Builder", aby wdrożyć Visual Builder.

W programie Visual Builder wstaw jednokolumnowy wiersz i dodaj moduł tekstowy do kolumny.

Na karcie treści w Ustawieniach modułu tekstowego wprowadź następujący kod html w polu treści (upewnij się, że pracujesz w zakładce „tekst”, a nie „wizualnej”):

<h2 class="subtitle fancy"><span>Product Description</span></h2>

Będą to nasze „wymyślne” napisy do różnych sekcji. Później nadamy mu styl za pomocą niestandardowego CSS.

Tuż pod tagiem h2 możesz dodać tekst opisu produktu. Na razie używam „lorem ipsum”.

Dodaj kolejny jednokolumnowy wiersz poniżej bieżącego wiersza i dodaj do niego kolejny moduł tekstowy. W ustawieniach modułu tekstowego dodaj kolejny podtytuł HTML, wstawiając następujący znacznik h2 „Za i przeciw” w zakładce tekstowej sekcji treści.

<h2 class="subtitle fancy"><span>Pros & Cons</span></h2>

To rozpocznie sekcję Plusy i minusy recenzji produktu.

Następnie dodaj pół pół pół (dwukolumnowy) wiersz pod poprzednim. W lewej kolumnie dodaj moduł tekstowy i umieść tytuł h3 z tekstem „Zalety”.

Teraz zduplikuj ten moduł tekstowy i przeciągnij zduplikowany moduł do prawej kolumny. Zmień tytuł h3 w nowym module tekstowym na „Wady”.

Wskazówka : w programie Visual Builder możesz po prostu kliknąć pole tekstowe i wpisać nowy tytuł zamiast otwierać ustawienia.

Następnie użyjemy modułu notki, aby dodać kilka podpunktów pod tytułami Za i Wady.

W lewej kolumnie, pod modułem tekstowym „Prosy”, dodaj moduł Blurb. Na karcie treści w Ustawieniach Blurb dodaj wiersz tekstu (na razie używam fikcyjnego tekstu) w polu treści.

Następnie przewiń w dół i wybierz „Użyj ikony”. W wyświetlonym polu Ikona wybierz symbol plusa.

Kliknij kartę Projekt i zaktualizuj następujące elementy:

Kolor ikony: #ffffff

Ikona koła: TAK

Kolor koła: #5bd999

Umieszczenie obrazu/ikony: po lewej

Zapisz ustawienia

Zduplikuj (lub skopiuj) ten moduł notatek i przeciągnij (lub wklej) go w module tekstowym „Wady”. Następnie zaktualizuj kartę Projekt ustawień rozmycia za pomocą następującego koloru koła: #e6567a

Zapisz ustawienia

Teraz zduplikuj moduły notatek w każdej kolumnie kilka razy, ponieważ nie wiemy, ile możesz potrzebować dla określonego produktu.

Teraz przejdź do ustawień wiersza, które zawierają Twoje zalety i wady. Na karcie treści zaktualizuj następujące informacje:

Tło kolumny 1: #f8f8f8

Tło kolumny 2: #f8f8f8

Na karcie Projekt zaktualizuj następujące elementy:

Użyj niestandardowej szerokości rynny: TAK

Szerokość rynny: 1

Wyrównaj wysokości kolumn: TAK

Dopełnienie kolumny 1: 20px (góra), 20px (prawo), 20px (dół), 20px (lewo)

Dopełnienie kolumny 2: 20px (góra), 20px (prawo), 20px (dół), 20px (lewo)

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do pola tekstowego Główny element kolumny 1 :

 border-top: 10px solid #5bd999; 

Dodaj następujący kod CSS do pola tekstowego głównego elementu kolumny 2 :

 border-top: 10px solid #e6567a; 

Wskazówka : Jeśli masz zaktualizowaną wersję Extra, powinieneś mieć możliwość zastosowania nowych animacji do swojej witryny. Dodaj animację do wiersza Plusy i minusy, przechodząc do Ustawień wiersza na karcie Projekt i wybierając odpowiedni styl animacji. Spowoduje to, że Twoja sekcja za i przeciw pojawi się, gdy użytkownik przewinie stronę w dół.

Zapisz ustawienia

Zduplikuj (lub skopiuj) drugi wiersz zawierający podtytuł „Za i przeciw” i przeciągnij go (lub wklej) pod wierszem, który właśnie skończyliśmy. Następnie zmień nagłówek h2 na „Specyfikacje”.

Zduplikuj dwukolumnowy wiersz zawierający pozycje listy za i przeciw i umieść go w nowym module tekstowym o tytule „Specyfikacje”. Usuń z kolumny dwa moduły tekstowe zawierające nagłówki „Za” i „Wady”.

Teraz kliknij Ustawienia rozmycia dla pierwszego modułu rozmycia w lewej kolumnie.

Na karcie Treść zmień ikonę na znacznik wyboru.

Na karcie Projekt zmień Kolor okręgu na #222222.

Zapisz ustawienia

Teraz usuń pozostałe moduły notek i zastąp je tym, który właśnie zaktualizowałeś, powielając je i przeciągając w odpowiednie miejsca.

Teraz przejdź do Ustawień wierszy i zastąp niestandardowy CSS w polu tekstowym Kolumna 1 Główny element i polu tekstowym Kolumna 2 Główny element następującym:

border-top: 10px solid #222222;

Zapisz ustawienia

Teraz ostatnią rzeczą, którą musimy dodać do tego układu posta, jest przycisk „kup”. Śmiało, utwórz nowy wiersz z jedną kolumną i dodaj moduł przycisku . Następnie zaktualizuj ustawienia modułu przycisków w następujący sposób:

W zakładce Treść…

Tekst przycisku: Kup teraz

Adres URL przycisku: [wprowadź adres URL] (najprawdopodobniej ostatecznie będzie to link partnerski do witryny strony trzeciej)

URL otwiera się: w nowej karcie

W zakładce Projekt…

Wyrównanie przycisków: środek

Kolor tekstu: ciemny

Użyj niestandardowych stylów dla przycisku: TAK

Rozmiar tekstu przycisku: 30px

Kolor tekstu przycisku: #222222

Kolor tekstu najechania przyciskiem: #5bd999

Kolor tła najechania przyciskiem: #ffffff

Kolor obramowania przycisku: #5bd999

To tyle, jeśli chodzi o sekcję treści w układzie postu o produkcie. Upewnij się, że zapisałeś stronę . Po zapisaniu strony wyjdź z kreatora wizualnego, aby edytować post z pulpitu nawigacyjnego wordpress.

Dodawanie recenzji do posta

Przewiń w dół strony edytora postów i znajdź pole zatytułowane „Recenzja zawartości pudełka” .

Ten sprytny dodatek do Extra umożliwia dodanie oceny produktu do swoich postów. System ocen jest zaprojektowany tak, aby zawierał jeden lub wiele podziałów. Podział to składnik, który składa się na ogólną ocenę. Na przykład, jeśli zamierzasz oceniać aparat, przykładowe awarie obejmują takie elementy, jak projekt, wydajność, żywotność baterii itp. Są to elementy aparatu, do których można dodać osobną wartość procentową oceny. Dodatek Extra następnie obliczy ogólny procent oceny na podstawie tych składników i wyświetli go w polu Przegląd. Pole Recenzja zawiera również przydatne obszary wprowadzania tytułu, podsumowania i tytułu podsumowania pola recenzji.

Aby dodać swoją recenzję, zaktualizuj zawartość pudełka recenzji o następujące elementy:

Tytuł pola recenzji: [wpisz tytuł pola recenzji] (proponuję „Recenzja produktu” lub „Recenzja redakcyjna”)

Podsumowanie: [wpisz podsumowanie]

Tytuł podsumowania: [wpisz tytuł podsumowania] (używam tylko „Podsumowanie”, aby było proste)

Następnie dodaj cztery podziały z tytułem i wartością procentową oceny w następujący sposób:

Podział #0

Tytuł: Projekt

Ocena: 85%

Podział nr 1

Tytuł: Performance

Ocena: 90%

Podział #2

Tytuł: Żywotność baterii

Ocena: 70%

Podział #3

Tytuł: Funkcje

Ocena: 85%

Teraz, gdy masz już swoją ocenę, wprowadź ostatnie poprawki do naszego posta, zanim go opublikujemy.

Przypisz kategorię do swojego posta

Upewnij się, że przypisujesz odpowiednią kategorię do swojego postu/produktu, klikając pole wyboru obok kategorii. W tym przypadku, ponieważ ten post dotyczy trackera fitness, wybiorę kategorię „Zdrowie i fitness”. Odznacz także pole „bez kategorii”.

Oto zestawienie produktów i ich kategorii, których używam:

• Odzież
  • Buty
  • Zegarek
  • Fajne skarpetki
• Kuchnia
  • Noże kuchenne
  • Mikser
  • Deska do krojenia
• Zdrowie i Kondycja
  • Monitor aktywności
  • Wagi
  • Bieżnia
• Elektronika
  • Kamera
  • Słuchawki
  • Komputer przenośny

Niedaleko strony znajdziesz pole Dodatkowe ustawienia. Te kontrolki pozwalają zastąpić domyślne ustawienia motywu dla tego konkretnego posta. Możesz oczywiście dostosować to, jak chcesz, ale w tym przykładzie zaznaczam następujące pola:

Polecany post (pozwala to na pobranie produktu jako polecanego posta w niektórych modułach kategorii.)

Ukryj pole autora

Na koniec dodaj swój polecany obraz. Upewnij się, że ma co najmniej 1280 pikseli szerokości, ponieważ dla polecanego obrazu użyjemy układu o pełnej szerokości 0 kolumn.

Opublikuj swój post.

Śmiało i zapisz ten szablon, aby móc powielić ten proces dla wszystkich swoich produktów/postów. Aby zapisać szablon, kliknij ikonę „Zapisz w bibliotece” w menu kreatora wizualnego na dole strony, wprowadź nazwę szablonu i kliknij Zapisz w bibliotece.

Teraz, gdy przejdziesz do dodawania reszty swoich postów, możesz załadować ten szablon z biblioteki i wypełnić treść do recenzji nowego produktu. Proces staje się wtedy znacznie szybszy.

Dodawanie niestandardowego CSS

Prawie skończyliśmy. Musimy dodać niestandardowy kod CSS do naszego motywu, aby nadać styl niektórym elementom posta. Aby to zrobić, z pulpitu nawigacyjnego WordPress przejdź do Theme Customizer > Additional CSS i wprowadź następujące informacje:

/****************************
comment box background
*****************************/
#comment-wrap {
    padding: 75px 40px;
	background: #fff;
	border-radius: 3px;
	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);
}
@media (min-width: 980px) {
/***************************
Post Header Size
****************************/
h1.entry-title {
    font-size: 48px;
}

/***************************
Fancy Subtitle
****************************/
.subtitle {
  margin: 1em 0 !important;
font-size: 48px;
}
.fancy {
  text-align: center;
  padding-bottom: 0px;
}
.fancy span {
  display: inline-block;
  position: relative; 
  line-height: 1.3em; 
}
.fancy span:before,
.fancy span:after {
  content: "";
  position: absolute;
  height: 5px;
  border-bottom: 4px solid #333;
  border-top: 4px solid #333;
  top: 40%;
  width: 100%;
  max-width: 200px;
}
.fancy span:before {
  right: 100%;
  margin-right: 15px;
}
.fancy span:after {
  left: 100%;
  margin-left: 15px;
}

/***************************
Star Rating and Social Icons Style
****************************/
.post-footer .rating-stars .rating-star {
width: 50px;
height: 50px;
}

.et_extra_layout .et_pb_column .module-head h1, .module-head .module-filter {
font-size: 28px;
}

.post-footer .rating-stars #rate-title, .post-footer .social-icons .share-title  {   
	display: block;
    font-size: 20px;
}

.post-footer .rating-stars, .post-footer .social-icons {
width: 100%;
margin: 0 auto;
padding: 30px 0;
}

.post-footer .social-icons {
border-bottom: 4px solid #dddddd;
}
}

/***************************
Mobile Adjustments
****************************/
@media (max-width: 980px) {
.subtitle {
font-size: 30px;
text-align: center;
}
}

Zapisz i opublikuj

Sprawdźmy teraz nasz wynik.

System oceny użytkowników

Zwróć uwagę, że na dole posta znajduje się system racji gwiazdek użytkownika.

Tutaj odwiedzający mogą wystawić ocenę początkową dowolnego produktu, po prostu najeżdżając kursorem na ikony gwiazdek i klikając wybrany przez siebie poziom gwiazdek.

Ogólna ocena użytkownika zostanie wyświetlona w metadanych we fragmencie posta.

Zawsze możesz wyłączyć tę funkcję w polu Dodatkowe ustawienia.

Cóż, to wszystko. Mam nadzieję, że podobała Ci się druga część tej serii.

Nadchodzi: tworzenie układów kategorii do wyświetlania produktów

W części 3 pokażę, jak zbudować układy kategorii dla strony głównej i strony Wszystkie kategorie. Upewnij się, że używasz nowego szablonu posta, aby dodać co najmniej 3 produkty dla każdej z 4 kategorii, aby przygotować się do trzeciej części serii. Będziesz ich potrzebować do wypełnienia modułów kategorii, które będą wyświetlać Twoje produkty.

Oto czego możesz się spodziewać w części 3:

Zapraszam do przesyłania pytań lub komentarzy poniżej. Czekam na kontakt z Państwem.