Costruire un sito di recensioni di prodotti con extra – Parte 4

Benvenuti alla parte 4 di questa serie di 4 parti su come sviluppare un sito di recensioni di prodotti utilizzando Extra. Se ti stai scervellando su come iniziare a sviluppare un sito di recensioni di prodotti, questa serie è per te. Con la sua funzionalità di revisione integrata e la categorizzazione intelligente dei post, Extra è appositamente attrezzato per creare recensioni di bell'aspetto, modelli di post di prodotti, mega menu e layout di categorie in pochi minuti. Unisciti a me mentre esploriamo il potere di Extra.

Nella parte 1 impostiamo le nostre opzioni del tema e le impostazioni di personalizzazione. Nella parte 2, abbiamo aggiunto i nostri post e creato un layout di post per visualizzare le recensioni dei nostri prodotti. Nella parte 3 di questa serie abbiamo creato due layout di categoria per il nostro sito di recensioni di prodotti: uno per la nostra home page e uno per la pagina "Tutte le categorie".

Oggi finiremo il nostro sito di recensioni dei prodotti costruendo il nostro layout di categoria predefinito, il nostro menu e il nostro piè di pagina. Il clou del post di oggi sarà il menu personalizzato che ha collegamenti di menu che corrispondono al colore delle pagine delle categorie corrispondenti. Ti mostrerò anche come distribuire le opzioni del mega menu integrato di Extra e aggiungere alcune personalizzazioni nostre.

Ecco un'anteprima di ciò che stiamo per costruire

Iniziamo.

Costruire un sito di recensioni di prodotti con extra – Parte 4

Iscriviti al nostro canale Youtube

Creazione della pagina di categoria predefinita

Extra viene fornito con una pagina di categoria predefinita già installata. La pagina di categoria predefinita è il layout che verrà utilizzato durante la visualizzazione di una pagina di categoria che non ha un layout di categoria specifico selezionato. Nella parte 3 di questa serie, abbiamo designato un layout di categoria per la nostra homepage e abbiamo assegnato la nostra pagina "Tutte le categorie" alla categoria specifica "Tutte le categorie". Per il resto delle nostre pagine delle categorie di recensioni dei prodotti, utilizzeremo questo layout di categoria predefinito.

Per personalizzare il nostro layout di categoria predefinito, vai alla dashboard di wordpress e vai su Extra > Generatore di categorie. Quindi passa il mouse sopra la "Categoria predefinita" e fai clic sul link di modifica.

Per impostazione predefinita, la tua categoria predefinita ha due moduli impilati uno sopra l'altro all'interno di una riga di una colonna di una sezione standard. Prima di apportare modifiche al layout, assicurati di selezionare l'opzione "Usa questo layout come layout predefinito?" nella casella Utilizzo layout nella barra laterale destra.

Innanzitutto, sostituisci il cursore dei post in primo piano con un modulo Carousel dei post. Quindi aggiorna le impostazioni del modulo selezionando "Categoria/Tag/Tassonomia attuale" come Categoria per questo modulo. Ora questo modulo del carosello di post mostrerà solo i prodotti della pagina della categoria visitata. Abbastanza intelligente, eh?

Salva ed esci

Puoi lasciare il modulo Massoneria del feed del blog alle sue impostazioni predefinite. Assicurati solo che qualsiasi modulo di categoria che aggiungi a questa pagina in futuro abbia la categoria "Categoria corrente/Tag/Tassonomia" assegnata.

Ora per dare uno stile al titolo h1 della tua pagina di categoria, devi aggiungere il seguente CSS personalizzato al CSS aggiuntivo nel Personalizzatore di temi. Assicurati di inserirlo in una media query con una larghezza minima di 980 px.

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

Questo è tutto per il layout di categoria predefinito. Diamo un'occhiata a come appare il nostro layout predefinito nella pagina della categoria della mia cucina.

Ora che abbiamo impostato il nostro layout di categoria predefinito, portiamo la nostra attenzione su una delle parti più importanti del nostro sito Web: il menu di navigazione.

Abbiamo già impostato il nostro stile di intestazione di base nella parte 1 di questa serie. Ma oggi creeremo e modelleremo il nostro menu di navigazione principale.

Dalla dashboard di WordPress, vai su Aspetto > Menu, quindi seleziona Menu . Seleziona il link "crea un nuovo menu" nella parte superiore della pagina e inserisci il nome "Menu categorie" come nome del menu. Quindi selezionare "Menu principale" come posizione di visualizzazione nella sezione Impostazioni menu.

Ora possiamo iniziare ad aggiungere le nostre voci di menu al nostro menu. Fare clic sull'interruttore Categorie a sinistra della pagina. Nelle opzioni visualizzate, seleziona "visualizza tutto" per assicurarti di poter vedere tutte le categorie disponibili. Seleziona tutte e 5 le categorie che hai creato (non senza categoria) e fai clic sul pulsante Aggiungi al menu per aggiungerle alla sezione della struttura del menu a destra della pagina. Ora puoi fare clic e trascinare ciascuna delle voci di menu da visualizzare nel seguente ordine:

• Elettronico
• Capi di abbigliamento
• Cucina
• Salute e fitness
• tutte le categorie

Prima di modificare le voci del menu, seleziona il collegamento delle opzioni dello schermo nella parte superiore della pagina. Nella sezione delle proprietà del menu avanzato che si apre, assicurati di selezionare la casella accanto a "Classi CSS". Questo ci consentirà di aggiungere una classe CSS personalizzata a ciascuna delle nostre voci di menu.

Torna al tuo menu. A partire dalla voce di menu Categoria elettronica, fare clic per attivare/disattivare le opzioni di configurazione. Nella casella Classi CSS, aggiungi una classe denominata "verde". E per l'opzione Menu Extra Mega, seleziona "Mega Menu 3 in primo piano".

Questo sta per realizzare due cose. Innanzitutto, la classe "verde" verrà utilizzata per trasformare la voce di menu in verde al passaggio del mouse. In secondo luogo, l'opzione in primo piano del mega menu 3 aggiungerà tre elementi in primo piano come un mega menu quando si passa con il mouse sopra la voce di menu.

Per la voce del menu Categoria abbigliamento, aggiungi la classe "blu" e seleziona l'opzione "Mega Menu 3 in primo piano" .

Per la voce del menu della categoria cucina, aggiungi la classe "rosa" e seleziona l'opzione "Mega menu 3 in primo piano" .

Per la voce del menu della categoria Salute e fitness, aggiungi la classe "viola" e seleziona l'opzione "Mega menu 3 in primo piano" .

La voce di menu "Tutte le categorie" sarà leggermente diversa. Vai avanti e lascia vuota la casella di testo Classi CSS. E per l'opzione Mega Menu, seleziona "Mega Menu List". Questo tipo di mega menu è un mega menu più tradizionale che crea un elenco di voci di sottomenu. L'obiettivo di questo mega collegamento al menu è mostrare tutte le categorie con un elenco dei loro prodotti sotto.

Torna indietro e apri la casella delle categorie e seleziona le stesse quattro categorie (Elettronica, Abbigliamento, Cucina e Salute e fitness) e aggiungile al menu. Quindi trascina ciascuna delle categorie che hai appena aggiunto di un livello sotto la voce del mega menu "Tutte le categorie".

Attiva o disattiva le opzioni di configurazione per ciascuna di queste voci di menu di categoria e aggiungi le stesse classi CSS a ciascuna come hai fatto in precedenza. Ecco le categorie con la classe che devi aggiungere:

Elettronica – verde
Abbigliamento – blu
Cucina – rosa
Salute e fitness – viola

Successivamente aggiungeremo la nostra immagine personalizzata per fungere da immagine di categoria in primo piano per ogni categoria nel mega menu.

Usa un editor di foto per ridurre e ritagliare ogni immagine in modo che abbia una larghezza di 500 px e un'altezza di 300 px.

Aggiungi/trascinali nella libreria multimediale di WordPress.

Ora torna alla pagina dei menu in WordPress Admin.

In questo esempio il collegamento alla categoria superiore nel mio mega menu è "Elettronica". Fare clic sulla freccia a destra della voce "Elettronica". Nella casella Etichetta di navigazione aggiungi l'immagine che desideri utilizzando il tag html img direttamente prima del testo "Elettronica". Il tag immagine dovrebbe avere il seguente aspetto:

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

Per trovare l'URL dell'immagine, vai su Media → Libreria. Fare clic sull'immagine che si desidera aggiungere. Nella schermata popup Dettagli allegato trova l'URL nella sezione a destra, evidenzialo, quindi usa ctrl+c per copiarlo negli appunti.

Ora torna alla configurazione della voce di menu "Elettronica" nella pagina del menu e sostituisci il testo "Inserisci URL immagine" incollando l'URL della tua immagine usando ctrl+v.

Ripeti lo stesso processo per le 3 voci di menu di categoria successive.

Dopo aver aggiunto tutti e quattro i tag immagine a ciascuna delle voci del menu della categoria, è tempo di aggiungere le voci del menu dei singoli post (collegamenti alle recensioni dei prodotti) in ciascuna delle rispettive categorie.

Fare clic per aprire la casella Post a sinistra e selezionare la scheda "visualizza tutto". Quindi seleziona tutti e 12 i tuoi prodotti e fai clic su Aggiungi al menu. Quindi trascina ciascuna delle voci del menu dei post di un livello sotto ciascuna delle loro categorie.

Menu Salva

Prima di dare un'occhiata al nostro nuovo menu, dobbiamo aggiungere alcuni CSS personalizzati per dare gli ultimi ritocchi al nostro menu.

Vai a Personalizzatore temi > CSS aggiuntivo e inserisci il seguente 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>ul>li>a:before {
height: 8px;
}

Salva e pubblica le tue impostazioni.

Ora diamo un'occhiata al nostro nuovo menu. Nota i colori delle voci di menu mentre passi il mouse su di esse. I colori corrispondono al colore della categoria corrispondente.

Costruire il piè di pagina

Per creare il piè di pagina per il nostro sito di recensioni di prodotti, sfrutteremo i widget integrati di Extra per visualizzare le ultime recensioni sui prodotti e un elenco di categorie.

Per prima cosa dobbiamo andare su Personalizza tema > Impostazioni piè di pagina. Quindi fare clic su Layout e selezionare un layout a 2 colonne.

Torna indietro e seleziona Tipografia e aggiorna quanto segue:

Dimensione del testo dell'intestazione: 32
Dimensione testo corpo/collegamento: 16
Colore del testo del widget: rgba (255,255,255,0.6)
Colore collegamento widget: #ffffff
Colore intestazione widget: #ffffff

Salva e pubblica

Torna al menu principale di Theme Customizer e seleziona Widget. Quindi seleziona Footer Sidebar Left e fai clic sul pulsante Aggiungi un widget. Seleziona il widget Extra – Recensioni recenti

Torna al menu dei widget e seleziona Footer Sidebar Right e aggiungi il widget Categorie.

Vai alla sezione CSS aggiuntivo e aggiungi il seguente CSS personalizzato per il tuo piè di pagina.

/****************************
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 e pubblica le impostazioni di personalizzazione del tema e vai a controllare il piè di pagina.

Questo è tutto. Hai completato con successo la parte 4 e completato la serie sulla creazione di un sito di recensioni di prodotti utilizzando Extra.

CSS finale

A seconda di dove sei entrato nella serie, potresti dover controllare il tuo CSS personalizzato per assicurarti di aver inserito tutto correttamente. Ecco il codice CSS finale da inserire in Theme Customizer.

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

Avvolgendo

Spero che ti sia piaciuto esplorare il potere di Extra nella creazione di un sito di recensioni di prodotti con me. Se non altro, sono sicuro che almeno te ne andrai con un nuovo apprezzamento per questo tema eccezionale e un po' di ispirazione per farne di più. Il sistema di revisione integrato, i layout di categoria intelligenti e la potenza di Divi Builder lo rendono perfetto per un sito di recensioni di prodotti.

Un argomento che non ho affrontato (salvandolo per un post futuro) è come gestire i link di affiliazione utilizzando Extra. Dopotutto, per la maggior parte delle persone l'obiettivo finale del proprio sito di recensioni di prodotti è fare soldi. Sentiti libero di condividere i tuoi pensieri su questo argomento qui sotto nei commenti.

Aspetto tue notizie.