Construirea unui site de examinare a produselor cu Extra - Partea 2

Bine ați venit la partea 2 a acestei serii cu 4 părți despre cum să dezvoltați un site de recenzie a produsului folosind Extra. Dacă vă gândiți cum să începeți să dezvoltați un site de revizuire a produselor, această serie este pentru dvs. Cu funcționalitatea de recenzie încorporată și clasificarea inteligentă a posturilor, Extra este special echipat pentru a crea recenzii cu aspect extraordinar, șabloane de postare pentru produse, mega meniuri și machete de categorii în câteva minute. Alătură-te mie în timp ce explorăm puterea Extra.

În prima parte a acestei serii ne-am început călătoria de a construi un site de revizuire a produselor prin configurarea opțiunilor temei și a setărilor de personalizare a temelor.

Astăzi vom începe să adăugăm prima noastră recenzie de produs ca postare nouă și personalizăm aspectul postării pentru postarea respectivă folosind Setările temei Divi Builder și Extra. După ce ați finalizat acest tutorial, veți avea un șablon de postare salvat pe care îl puteți extrage din bibliotecă pentru a crea restul de postări cu ușurință.

Iată o scurtă privire asupra a ceea ce vom construi

Pregătirea elementelor de proiectare

Deoarece vom adăuga produsele noastre în această parte a seriei, veți avea nevoie de imaginile dvs. despre produs. Pentru acest tutorial, voi avea 4 categorii cu 3 produse în fiecare categorie, așa că voi folosi un total de 12 imagini. Folosesc imagini stoc din shutterstock cu fundal alb pentru a-i oferi un aspect mai curat.

Pentru a proiecta aspectul postării, vom folosi Visual Builder și un pic CSS personalizat.

Să începem.

Construirea unui site de revizuire a produselor cu Extra - Partea 2

Abonați-vă la canalul nostru Youtube

Adăugarea primei dvs. recenzii de produs ca postare nouă

Din tabloul de bord WordPress, accesați Postări> Adăugare nouă .

Fiecare postare va fi o recenzie a produsului dvs., astfel încât numele postării dvs. ar trebui să fie numele produsului dvs. Deoarece produsul meu va fi un tracker de fitness, voi introduce „Fitness Tracker” ca titlu al postării mele.

Notă : dacă nu ați făcut-o deja, acum este un moment bun pentru a seta setările de legătură permanentă la opțiunea „Nume postare”, astfel încât adresa URL să conțină doar numele produsului (preferința dvs., desigur).

Apoi, faceți clic pe butonul „Use Divi Builder” și apoi pe butonul „Use Visual Builder” pentru a implementa Visual Builder.

Din Visual Builder, introduceți un rând cu o coloană și adăugați un modul de text în coloană.

În fila de conținut a Setărilor modulului de text, introduceți următorul html în caseta de conținut (asigurați-vă că lucrați în fila „text” și nu în fila „vizuală”):

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

Aceasta va servi drept subtitrări „fanteziste” pentru diferite secțiuni. O vom stiliza cu CSS personalizat mai târziu.

Chiar sub eticheta h2 puteți adăuga textul descrierii produsului. Deocamdată folosesc niște „lorem ipsum”.

Adăugați un alt rând cu o coloană sub rândul curent și adăugați un alt modul de text în el. În Setările modulului de text, adăugați un alt subtitlu html inserând următoarea etichetă h2 „Pro și Contra” în fila text a secțiunii de conținut.

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

Aceasta va începe secțiunea Pro și Contra din revizuirea produsului.

Apoi adăugați un rând jumătate jumătate (două coloane) sub cel precedent. În coloana din stânga adăugați un modul de text și puneți un titlu h3 cu textul „Pro”.

Acum copiați modulul text și trageți modulul duplicat în coloana din dreapta. Schimbați titlul h3 din noul modul text în „Contra”.

Sfat : în Visual Builder puteți pur și simplu să faceți clic pe caseta de text și să tastați noul titlu în loc să deschideți setările.

În continuare vom folosi modulul blurb pentru a adăuga câteva sub-elemente sub titlurile Pro și Contra.

În coloana din stânga, sub Modulul text „Pro”, adăugați un modul Blurb. În fila de conținut a Setărilor Blurb, adăugați o linie de text (deocamdată folosesc text fals) în caseta de conținut.

Apoi derulați în jos și selectați „Utilizați pictograma”. În caseta Pictogramă care apare, selectați simbolul plus.

Faceți clic pe fila Design și actualizați următoarele:

Culoare pictogramă: #ffffff

Pictogramă cerc: DA

Culoarea cercului: # 5bd999

Plasare imagine / pictogramă: stânga

Salvează setările

Duplicați (sau copiați) acel modul de blurb și trageți-l (sau lipiți-l) sub modulul text „Contra”. Apoi actualizați fila Blurb Settings Design cu următoarea culoare a cercului: # e6567a

Salvează setările

Acum copiați de câteva ori modulele blurb din fiecare coloană, deoarece nu știm cât de multe ar putea avea nevoie pentru un anumit produs.

Acum, accesați setările de rând care conțin argumentele pro și contra. Sub fila conținut , actualizați următoarele:

Fundalul coloanei 1: # f8f8f8

Fundalul coloanei 2: # f8f8f8

Sub fila Proiectare , actualizați următoarele:

Utilizați lățimea personalizată a jgheabului: DA

Lățimea jgheabului: 1

Egalizați înălțimile coloanei: DA

Umplerea coloanei 1: 20 px (sus), 20 px (dreapta), 20 px (jos), 20 px (stânga)

Umplerea coloanei 2: 20 px (sus), 20 px (dreapta), 20 px (jos), 20 px (stânga)

Sub fila Avansat , adăugați următorul CSS personalizat în caseta de text Coloana 1 Element principal :

 border-top: 10px solid #5bd999; 

Adăugați următorul CSS în caseta de text Columna 2 Element principal :

 border-top: 10px solid #e6567a; 

Sfat : dacă aveți o versiune actualizată a Extra, ar trebui să aveți posibilitatea de a aplica noile animații pe site-ul dvs. web. Adăugați o animație în rândul Pro și Contra accesând Setările rândului din fila Design și selectând Stilul de animație dorit. Acest lucru va face ca secțiunea Pro și Contra să apară în timp ce utilizatorul derulează pagina în jos.

Salvează setările

Duplicați (sau copiați) al doilea rând care conține subtitlul „Pro și contra” și trageți (sau lipiți) sub rândul pe care tocmai l-am terminat. Apoi schimbați antetul h2 la „Specificații”.

Duplicați rândul din două coloane care conține elementele din lista de argumente pro și contra și puneți-l sub noul modul de text cu titlul „Specificații”. Ștergeți din coloană cele două module text care conțin anteturile „Pro” și „Contra”.

Acum faceți clic pe Setări Blurb pentru primul modul Blurb din coloana din stânga.

Sub fila Conținut , schimbați pictograma cu o bifă.

Sub fila Proiectare , schimbați culoarea cercului în # 222222.

Salvează setările

Acum ștergeți celelalte module de blurb și înlocuiți-le cu cel pe care tocmai l-ați actualizat, duplicându-le și glisându-le în locurile potrivite.

Acum, accesați Setările rândului și înlocuiți CSS personalizat atât în ​​caseta de text Columna 1 Element principal, cât și în caseta de text Coloana 2 Element principal cu următoarele:

border-top: 10px solid #222222;

Salvează setările

Acum, ultimul lucru pe care trebuie să-l adăugăm la acest aspect al postării este un buton „cumpărați”. Continuați și creați un nou rând cu o singură coloană și adăugați un modul buton . Apoi actualizați setările modulului buton după cum urmează:

Sub fila Conținut ...

Text buton: Cumpărați acum

Adresa URL a butonului: [introduceți adresa URL] (cel mai probabil acesta va fi în cele din urmă un link afiliat către un site terț)

Url se deschide: în fila nouă

Sub fila Proiectare ...

Aliniere buton: centru

Culoarea textului: Întunecat

Utilizați stiluri personalizate pentru buton: DA

Dimensiune text buton: 30 px

Culoarea textului butonului: # 222222

Culoare text buton deplasare: # 5bd999

Culoarea fundalului butonului Hover: #ffffff

Culoarea chenarului butonului: # 5bd999

Asta este pentru secțiunea de conținut a aspectului postării produsului. Asigurați-vă că salvați pagina . După ce ați salvat pagina, ieșiți din generatorul vizual pentru a edita postarea din tabloul de bord wordpress.

Adăugarea de recenzii la postarea dvs.

Derulați în jos până la partea de jos a paginii editorului de mesaje și găsiți caseta intitulată „Revizuirea conținutului casetei” .

Această adăugare inteligentă la Extra vă permite să adăugați o evaluare a produsului la postările dvs. Sistemul de evaluare este conceput pentru a avea una sau mai multe defecțiuni. O defalcare este o componentă care alcătuiește ratingul general. De exemplu, dacă urmează să evaluați o cameră, exemplele de defecțiuni ar include lucruri precum designul, performanța, durata de viață a bateriei etc. Acestea sunt componente ale camerei la care puteți adăuga un procent de evaluare separat. Extra va calcula apoi procentul general de evaluare pe baza acelor componente și îl va afișa în caseta Revizuire. Caseta Recenzie are, de asemenea, zone utile de introducere pentru titlul casetei de recenzie, rezumat și titlu rezumat.

Pentru a adăuga recenzia dvs., actualizați conținutul casetei de examinare cu următoarele:

Titlul casetei de recenzii: [introduceți titlul casetei de recenzii] (vă sugerez „Revizuirea produsului” sau „Revizuirea editorială”)

Rezumat: [introduceți rezumatul]

Titlu rezumat: [introduceți un titlu pentru rezumat] (folosesc doar „Rezumat” pentru a-l simplifica)

Apoi adăugați patru defalcări cu un titlu și un procentaj de evaluare după cum urmează:

Defalcare # 0

Titlu: Design

Evaluare: 85%

Defalcare nr. 1

Titlu: Performanță

Evaluare: 90%

Defalcarea nr. 2

Titlu: Durata de viață a bateriei

Evaluare: 70%

Defalcarea nr. 3

Titlu: Caracteristici

Evaluare: 85%

Acum, că aveți evaluarea în vigoare, permiteți să punem câteva atingeri finale asupra postării noastre înainte de a publica.

Atribuiți o categorie postării dvs.

Asigurați-vă că atribuiți categoria potrivită postării / produsului dvs. dând clic pe caseta de selectare de lângă categorie. În acest caz, deoarece această postare este pentru un tracker de fitness, voi selecta categoria „Sănătate și fitness”. De asemenea, debifați caseta pentru „necategorizat”.

Iată o defalcare a produselor și a categoriilor lor pe care le folosesc:

• Îmbrăcăminte
  • Pantofi
  • Ceas
  • Șosete reci
• Bucătărie
  • Cuțite de bucătărie
  • Mixer
  • Masă de tăiat
• Sănătate și fitness
  • Fitness Tracker
  • Greutăți
  • Banda de alergat
• Electronică
  • aparat foto
  • Căști
  • Laptop

Nu departe de pagină veți găsi caseta Setări suplimentare. Aceste controale vă permit să înlocuiți setările implicite ale temei pentru această postare specială. Desigur, puteți personaliza acest lucru oricum doriți, dar pentru acest exemplu, bifez următoarele casete:

Postare recomandată (Aceasta permite ca produsul să fie tras ca postare recomandată pe anumite module de categorie.)

Ascundeți caseta autorului

În cele din urmă, adăugați imaginea prezentată. Asigurați-vă că are o lățime de cel puțin 1280 px, deoarece vom folosi un aspect cu lățime completă de 0 coloane pentru imaginea prezentată.

Publică-ți postarea.

Continuați și salvați acest șablon, astfel încât să puteți duplica acest proces pentru toate produsele / postările dvs. Pentru a salva șablonul, faceți clic pe pictograma „Salvare în bibliotecă” din meniul constructor vizual din partea de jos a paginii, introduceți un nume de șablon și faceți clic pe Salvare în bibliotecă.

Acum, când vă duceți să adăugați restul postărilor dvs., puteți încărca acest șablon din bibliotecă și completați conținutul pentru recenzia noului produs. Apoi procesul devine mult mai rapid.

Adăugarea CSS personalizat

Aproape am terminat. Trebuie să adăugăm CSS personalizate la tema noastră pentru a stiliza unele elemente ale postării. Pentru a face acest lucru, din tabloul de bord WordPress, accesați Theme Customizer> CSS suplimentar și introduceți următoarele:

/****************************
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;
}
}

Salvați și publicați

Acum, să verificăm rezultatul nostru.

Sistemul de evaluare a utilizatorilor

Observați că în partea de jos a postării aveți un sistem de rationare a stelelor de utilizator.

Aici vizitatorii dvs. pot trimite o evaluare inițială pentru orice produs, pur și simplu trecând cu mouse-ul peste pictogramele stele și făcând clic pe nivelul stelelor pe care îl aleg.

Evaluarea generală a utilizatorului va fi afișată în meta date pe extrasul de postare.

Puteți alege oricând să dezactivați această caracteristică în caseta Setări suplimentare.

Ei bine, asta e. Sper că ți-a plăcut partea 2 a acestei serii.

În curs de desfășurare: Construiți machete de categorie pentru a vă afișa produsele

În partea 3, vă voi arăta cum să construiți aspectele categoriilor pentru pagina principală și pagina Toate categoriile. Asigurați-vă că utilizați noul dvs. șablon de postare pentru a adăuga cel puțin 3 produse pentru fiecare dintre cele 4 categorii pentru a vă pregăti pentru partea 3 a seriei. Veți avea nevoie de acestea pentru a completa modulele de categorie care vă vor afișa produsele.

Iată ce vă puteți aștepta să construiți în partea 3:

Nu ezitați să trimiteți întrebări sau comentarii mai jos. Aștept cu nerăbdare să ne auzim.