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

Publicat: 2017-09-17

Bine ați venit la partea 4 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 ne-am setat opțiunile de temă și setările de personalizare. În partea 2, am adăugat postările noastre și am construit un aspect al postărilor pentru a afișa recenziile noastre despre produse. În partea 3 a acestei serii am creat două machete de categorie pentru site-ul nostru de examinare a produselor - una pentru pagina noastră de pornire și una pentru pagina „Toate categoriile”.

Astăzi vom finaliza site-ul nostru de revizuire a produselor construind aspectul nostru implicit al categoriilor, meniul și subsolul nostru. Punctul culminant al postării de astăzi va fi meniul personalizat care are legături de meniu care se potrivesc cu culoarea paginilor de categorie corespunzătoare. De asemenea, vă voi arăta cum să implementați opțiunile de meniu mega încorporate în Extra și să adăugați câteva personalizări proprii.

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

revizuirea produsului

Să începem.

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

Abonați-vă la canalul nostru Youtube

Construirea paginii Categorie implicită

Extra vine cu o pagină de categorie implicită deja instalată. Pagina de categorie implicită este aspectul care va fi utilizat la vizualizarea unei pagini de categorii care nu are selectat un aspect de categorie specific. În partea 3 a acestei serii, am desemnat un aspect de categorie pentru pagina noastră de pornire și am atribuit pagina „Toate categoriile” categoriei specifice „Toate categoriile”. Pentru restul paginilor noastre de categorii de recenzii de produse, vom folosi acest aspect al categoriei implicite.

Pentru a personaliza aspectul nostru implicit al categoriilor, accesați tabloul de bord wordpress și navigați la Extra> Generator de categorii. Apoi, plasați cursorul peste „Categorie implicită” și faceți clic pe linkul de editare.

revizuirea produsului

În mod implicit, categoria dvs. implicită are două module stivuite unul peste altul într-un rând cu o coloană a unei secțiuni standard. Înainte de a aduce modificări aspectului, asigurați-vă că selectați opțiunea „Folosiți acest aspect ca aspect implicit?” în caseta Utilizare aspect din bara laterală dreaptă.

revizuirea produsului

Mai întâi, înlocuiți glisorul de posturi recomandate de sus cu un modul Carusel pentru posturi. Apoi actualizați setările modulului bifând „Categorie curentă / etichetă / taxonomie” ca categorie pentru acest modul. Acum, acest modul carusel de postări va afișa numai produsele din pagina categoriei vizitate. Destul de inteligent, nu?

Salvați și ieșiți

Puteți lăsa modulul Blog Masonry Feed la setările implicite. Asigurați-vă că oricare modul de categorie pe care îl adăugați în această pagină în viitor are categoria „Categorie actuală / Etichetă / Taxonomie” atribuită.

Acum, pentru a vă stiliza titlul categoriei de pagină h1, trebuie să adăugați următorul CSS personalizat la CSS suplimentar din Customizerul tematic. Asigurați-vă că îl introduceți într-o interogare media cu o lățime minimă de 980 px.

.archive h1 {
text-align: center;
font-size: 48px;
line-height: 1.3em;
}

Asta este pentru aspectul de categorie implicit. Să vedem cum arată aspectul nostru implicit pe pagina mea de categorii de bucătărie.

revizuirea produsului

Acum, că dispunem de aspectul categoriei implicite, să ne atragem atenția asupra uneia dintre cele mai importante părți ale site-ului nostru web - meniul de navigare.

Am configurat deja stilul de bază al antetului în prima parte a acestei serii. Dar astăzi vom crea și stiliza meniul nostru principal de navigare.

Din tabloul de bord WordPress, navigați la Aspect> Meniuri, apoi selectați Meniuri . Selectați linkul „creați un meniu nou” din partea de sus a paginii și introduceți numele „Meniu categorii” ca nume de meniu. Apoi selectați „Meniul principal” ca locație de afișare în secțiunea Setări meniu.
revizuirea produsului

Acum putem începe să adăugăm elementele de meniu la meniul nostru. Faceți clic pe comutatorul Categorii din stânga paginii. În opțiunile care apar, selectați „Afișați toate” pentru a vă asigura că puteți vedea toate categoriile disponibile. Bifați toate cele 5 categorii pe care le-ați creat (nu necategorizate) și faceți clic pe butonul Adăugare la meniu pentru a le adăuga în secțiunea de structură a meniului din dreapta paginii. Acum puteți să faceți clic și să trageți fiecare dintre elementele de meniu care să fie afișate în următoarea ordine:

Electronic
Îmbrăcăminte
Bucătărie
Sănătate și fitness
toate categoriile

revizuirea produsului

Înainte de a edita elementele de meniu, selectați legătura cu opțiunile ecranului din partea de sus a paginii. În secțiunea de proprietăți avansate a meniului care se deschide, asigurați-vă că bifați caseta de lângă „Clase CSS”. Acest lucru ne va permite să adăugăm o clasă CSS personalizată la fiecare dintre elementele noastre din meniu.

revizuirea produsului

Reveniți la meniul dvs. Începând cu elementul din meniul Categorie electronică, faceți clic pentru a comuta deschiderea opțiunilor de configurare. În caseta Clase CSS, adăugați o clasă numită „verde”. Și pentru opțiunea Extra Mega Menu, selectați „Mega Menu 3 Featured”.

Aceasta va realiza două lucruri. În primul rând, clasa „verde” va fi utilizată pentru a porni elementul de meniu verde pe cursor. În al doilea rând, opțiunea cu mega meniu 3 va adăuga trei elemente prezentate ca mega meniu atunci când treceți cu mouse-ul peste elementul de meniu.

Pentru elementul Meniu Categorie Îmbrăcăminte, adăugați clasa „albastru” și selectați opțiunea „Mega Meniu 3 Featured” .

Pentru elementul din meniul Categorie bucătărie, adăugați clasa „roz” și selectați opțiunea „Mega meniu 3 Featured” .

Pentru elementul din meniul Health & Fitness Category, adăugați clasa „violet” și selectați opțiunea „Mega Menu 3 Featured” .

revizuirea produsului

Elementul de meniu „Toate categoriile” va fi ușor diferit. Continuați și lăsați caseta de text Clase CSS. Și pentru opțiunea Mega Menu, selectați „Mega Menu List”. Acest tip de mega meniu este un mega meniu mai tradițional care creează o listă de elemente de submeniu. Scopul acestui link de mega meniu este de a afișa toate categoriile cu o listă a produselor lor dedesubt.

Întoarceți-vă și deschideți caseta de categorii și selectați aceleași patru categorii (Electronică, Îmbrăcăminte, Bucătărie și Sănătate și fitness) și adăugați-le la meniu. Apoi, trageți fiecare dintre categoriile pe care tocmai le-ați adăugat un nivel sub elementul de meniu mega „Toate categoriile”.

revizuirea produsului

Comutați opțiunile de configurare pentru fiecare dintre acele elemente din meniul categoriei și adăugați aceleași clase CSS la fiecare așa cum ați făcut anterior. Iată categoriile cu clasa pe care trebuie să le adăugați:

Electronică - verde
Îmbrăcăminte - albastră
Bucătărie - roz
Sănătate și fitness - violet

În continuare, vom adăuga propria noastră imagine personalizată pentru a servi ca imagine de categorie prezentată pentru fiecare categorie din mega meniu.

Utilizați un editor foto pentru a micșora și decupa fiecare imagine pentru a avea o lățime de 500 px și o înălțime de 300 px.

Adăugați-le / trageți-le în biblioteca media WordPress.

Acum reveniți la pagina meniurilor din WordPress Admin.

În acest exemplu, legătura de categorie superioară din mega meniul meu este „Electronică”. Faceți clic pe săgeata din dreapta elementului „Electronică”. În caseta Etichetă de navigare adăugați imaginea dorită folosind eticheta html img direct înainte de textul „Electronică”. Eticheta de imagine ar trebui să arate după cum urmează:

<img src="Insert Image Url" width="100%" />

revizuirea produsului

Pentru a găsi adresa URL a imaginii, accesați Media → Library. Faceți clic pe imaginea pe care doriți să o adăugați. În ecranul pop-up Detalii atașament găsiți adresa URL din secțiunea din dreapta, evidențiați-o, apoi folosiți ctrl + c pentru a o copia în clipboard.

Acum reveniți la configurația elementului de meniu „Electronică” din pagina meniului și înlocuiți textul „Inserați adresa URL a imaginii” lipind adresa URL a imaginii dvs. folosind ctrl + v.

Repetați același proces pentru următoarele 3 elemente din meniul categoriei.

După ce ați adăugat toate cele patru etichete de imagine la fiecare dintre elementele din meniul categoriei, este timpul să adăugați elementele de meniu ale postărilor individuale (linkuri către recenziile dvs. de produse) în fiecare categorie respectivă.

Faceți clic pentru a comuta deschiderea casetei Postări din stânga și selectați fila „Vizualizați toate”. Apoi selectați toate cele 12 produse și faceți clic pe Adăugare la meniu. Apoi trageți fiecare element al meniului de postare la un nivel sub fiecare dintre categoriile lor.

revizuirea produsului Salvați meniul

Înainte de a vizita noul nostru meniu, trebuie să adăugăm câteva CSS personalizate pentru a pune ultimele atingeri în meniul nostru.

Accesați Theme Customizer> CSS suplimentar și introduceți următorul CSS:

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation&amp;amp;amp;gt;ul&amp;amp;amp;gt;li&amp;amp;amp;gt;a:before {
height: 8px;
}

Salvați și publicați setările.

Acum, să verificăm noul nostru meniu. Observați culorile elementelor de meniu pe măsură ce treceți cu mouse-ul peste ele. Culorile se potrivesc culorii corespunzătoare categoriei lor.

revizuirea produsului

Construirea subsolului

Pentru a construi subsolul site-ului nostru de revizuire a produselor, vom profita de widget-urile încorporate Extra pentru a afișa cele mai recente recenzii de produse și o listă de categorii.

Mai întâi trebuie să mergem la Personalizator temă> Setări subsol. Apoi faceți clic pe Aspect și selectați un aspect cu 2 coloane.

revizuirea produsului

Întoarceți-vă și selectați Tipografie și actualizați următoarele:

Dimensiune text antet: 32
Dimensiune text corp / legătură: 16
Culoare text widget: rgba (255,255,255,0,6)
Culoare link widget: #ffffff
Culoare antet widget: #ffffff

revizuirea produsului

Salvați și publicați

Reveniți la meniul principal al Personalizatorului de teme și selectați Widgeturi. Apoi selectați Footer Sidebar Side și faceți clic pe butonul pentru a adăuga un widget. Selectați widgetul Recenzii recente - Extra

revizuirea produsului

Reveniți la meniul widgeturilor și selectați Footer Sidebar Side dreapta și adăugați widgetul Categorii.

revizuirea produsului

Accesați secțiunea CSS suplimentară și adăugați următorul CSS personalizat pentru subsolul dvs.

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}
.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

Salvați și publicați setările Personalizatorului de teme și accesați subsolul.

revizuirea produsului

Asta e. Ați terminat cu succes partea a 4-a și ați finalizat seria privind construirea unui site de revizuire a produsului folosind Extra.

CSS final

În funcție de locul în care ați intrat în serie, poate fi necesar să vă verificați CSS-ul personalizat pentru a vă asigura că aveți totul introdus corect. Iată codul CSS final care trebuie introdus în Customizerul tematic.

.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;
}

/****************************
style menu
*****************************/

#et-menu li.green a:hover, #et-menu li.current-menu-item.green a {
color: #5bd999 !important;
}

li.green a:before {
background-color: #5bd999 !important;
}

#et-menu li.pink a:hover, #et-menu li.current-menu-item.pink a {
color: #e6567a !important;
}

li.pink a:before {
background-color: #e6567a !important;
}

#et-menu li.blue a:hover, #et-menu li.current-menu-item.blue a{
color: #00c0e4 !important;
}

li.blue a:before {
background-color: #00c0e4 !important;
}

#et-menu li.purple a:hover, #et-menu li.current-menu-item.purple a{
color: #7658f8 !important;
}

li.purple a:before {
background-color: #7658f8 !important;
}

/***************************
increase height of line under nav links on hover
****************************/
#et-navigation>ul>li>a:before {
height: 8px;
}

/****************************
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) {

.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;
}

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

/****************************
footer
*****************************/
#footer .et_pb_widget li {
border-bottom: none;
color: #fff;
}

.et_pb_widget.widget_et_recent_reviews .review-breakdowns .score-bar-bg {
background: rgba(255,255,255,.1);
}

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

Încheierea

Sper că v-a plăcut să explorați puterea Extra în construirea unui site de revizuire a produselor împreună cu mine. În orice caz, sunt încrezător că cel puțin veți pleca cu o nouă apreciere pentru această temă remarcabilă și puțină inspirație pentru a face mai mult cu ea. Sistemul de revizuire încorporat, aspectele inteligente ale categoriilor și puterea Divi Builder îl fac o potrivire excelentă pentru un site de revizuire a produselor.

Un subiect pe care nu l-am abordat (salvarea acestuia pentru o postare viitoare) este cum să gestionez linkurile afiliate folosind Extra. La urma urmei, pentru majoritatea oamenilor, obiectivul final pentru site-ul lor de revizuire a produselor este să câștige bani. Simțiți-vă liber să împărtășiți părerile dvs. despre această problemă mai jos în comentarii.

Aștept cu nerăbdare să ne auzim.