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

Benvenuto nella terza parte 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 2 di questa serie abbiamo creato il nostro modello di post di recensione del prodotto utilizzando le impostazioni integrate di Extra e Visual Builder. Con il nuovo modello di post, sei stato in grado di aggiungere ulteriori post e assegnarli alle rispettive categorie.

Oggi costruiremo due layout di categoria utilizzando il generatore di categorie di Extra. Il primo layout mostrerà i post/recensioni dei prodotti sulla tua home page evidenziando le recensioni più recenti e popolari. Il secondo layout mostrerà tutte le categorie su una pagina utilizzando il modulo di scorrimento del carosello. Una volta completato questo tutorial, avrai una buona base per un sito di recensioni di prodotti ben progettato.

Ecco un'anteprima di ciò che stiamo per costruire

Preparazione degli elementi di design

Poiché i layout delle categorie dipendono in gran parte dal contenuto del post, assicurati di aggiungere abbastanza post in modo da poter avere un'idea di come apparirà il sito una volta aggiunto il tuo contenuto. Come discusso nella parte 2 di questa serie, i miei layout di categoria sono popolati con 4 categorie e con 3 prodotti in ciascuna categoria. Sto usando immagini stock di shutterstock per le immagini in primo piano dei miei post.

Per progettare i layout delle categorie utilizzeremo il Category Builder di Extra e un po' di Custom CSS.

Iniziamo.

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

Iscriviti al nostro canale Youtube

Costruire il layout di categoria per la home page

Per impostazione predefinita, extra utilizza un layout di categoria per la home page. Per creare un layout personalizzato, dalla barra laterale del dashboard di WordPress, vai su Extra > Costruzione di categorie . Trova il layout di categoria già presente chiamato "home page", quindi passa il mouse su di esso e seleziona modifica.

Quindi, fai clic su "Cancella layout" nel menu del generatore viola per cancellare il layout predefinito corrente.

Ora possiamo iniziare a costruire il nostro layout personalizzato. Inizia aggiungendo una colonna di due terzi e un terzo alla riga nella sezione standard.

Nella colonna di sinistra (due terzi), aggiungi un dispositivo di scorrimento dei post in primo piano.

Aggiorna le impostazioni del modulo di scorrimento dei post in primo piano come segue:

Nella scheda Contenuto...

Categorie: Tutti
Visualizza solo i post in primo piano: [Lo terrei disattivato finché non decidi quali post vuoi mettere in primo piano. Puoi designare un determinato post come descritto nella casella Impostazioni extra nella pagina dell'editor dei post.]
Mostra Autore: OFF
Mostra data: OFF

Nella scheda Progettazione...

Colore freccia di navigazione: #ffffff
Sfondo freccia di navigazione: #000000
Sfondo della didascalia: rgba (255,255,255,0.4)
Dimensione carattere del titolo: 24px
Colore del testo del titolo: #000000
Dimensione carattere meta: 16px
Colore meta testo: #000000
Margine personalizzato: 0px inferiore

Nella scheda Avanzate...

Inserisci il seguente CSS personalizzato nella casella di testo Elemento principale:

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

Salva le impostazioni

Ora aggiungi un modulo di testo alla colonna di destra (un terzo) e aggiorna le impostazioni del modulo di testo come segue:

Nella scheda Contenuto, aggiungi il seguente codice html alla scheda di testo della casella del contenuto:

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

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

Il link qui è pensato per fungere da finto pulsante CTA. Puoi scegliere di usarlo come vuoi. Aggiorna semplicemente l'URL e il testo del collegamento.

Suggerimento : puoi utilizzare Bloom per attivare una finestra popup di attivazione e-mail quando fai clic su questo CTA. In questo modo i visitatori saranno in grado di rimanere al passo con i prodotti oggi con la tua campagna di email marketing. Per fare ciò dovrai installare Bloom, aggiungere un modulo popup e integrare il tuo provider di posta elettronica. Quindi scegli di visualizzare il popup quando fai clic sul selettore CSS "a.join-cta" che corrisponde alla classe di collegamento nel codice html sopra.

Puoi anche leggere di più su come creare il popup del modulo bloom optin quando fai clic su un pulsante.

Ora torniamo alle impostazioni del modulo di testo.

Nella scheda Progettazione...

Dimensione carattere del testo: 40 px (desktop), 24 px (tablet e smartphone)
Dimensione carattere intestazione: 42 pixel (desktop), 38 pixel (tablet), 28 pixel (smartphone)
Imbottitura personalizzata: 40 px (in alto), 15 px (a destra), 15 px (in basso), 15 px (a sinistra)

Salva le impostazioni

Ora vai alle Impostazioni riga in modo che possiamo modellare lo sfondo della riga.

Quindi aggiorna quanto segue:

Nella scheda Contenuto...

Sfondo: #ffffff

Nella scheda Progettazione...

Rendi questa riga a larghezza intera: S
Equalizza le altezze delle colonne: S

Nella scheda Avanzate , aggiungi il seguente CSS personalizzato alla casella di input Elemento principale:

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);

Salva le impostazioni

Dai un'occhiata ora alla tua sezione di scorrimento in primo piano personalizzata.

Sembra buono finora.

Continuiamo. Torna al Generatore di categorie e aggiungi una sezione standard sotto la sezione corrente e aggiungi una riga a una colonna con un modulo di testo.

Quindi aggiorna le impostazioni del modulo di testo come segue:

Nella scheda Contenuto , aggiungi questo titolo html nella scheda di testo della casella del contenuto:

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

Nella scheda Progettazione...

Orientamento del testo: al centro
Carattere intestazione: B (grassetto)
Dimensione carattere intestazione: 48px (desktop), 42px (tablet), 36px (smartphone)

Salva le impostazioni

Questo servirà come titolo della sezione sottostante che mostrerà le tue recensioni sui prodotti.

Quindi aggiungi una sezione speciale con la seguente struttura di tre quarti e un quarto di colonna:

Nella sezione sinistra (tre quarti), aggiungi una riga di due colonne.

Nella colonna di sinistra di quella riga, aggiungi un modulo post

Quindi aggiorna le impostazioni del modulo dei post nella scheda Contenuto assegnando una categoria al modulo. In questo modo il modulo dei post mostrerà solo quella categoria. Per fare ciò, selezionerò "Abbigliamento" come categoria.

Quindi aggiorna quanto segue:

Mostra Autore: NO
Data spettacolo: NO

Salva le impostazioni

Duplica questo modulo post in modo da avere due moduli post impilati sulla colonna di sinistra e 2 sulla destra.

Quindi aggiorna le Impostazioni in ogni modulo con una categoria diversa. Le categorie che ho sono Abbigliamento, Elettronica, Cucina e Salute e fitness.

Se desideri aggiungere un modulo post che visualizzi le recensioni video, puoi aggiungerlo qui. Per prima cosa dovrai aggiungere una nuova categoria di post chiamata Video, assegnare alla categoria il colore #222222. Quindi crea un nuovo post, seleziona "Video" per il formato e aggiungi l'URL del video alla casella Opzioni formato video integrata di Extra.

Quindi puoi aggiungere il contenuto della casella di revisione da visualizzare sotto il video.

Dopo aver caricato alcuni video, assicurati di aggiungerli alla categoria Video. Quindi torna al Generatore di categorie per la tua home page e aggiungi una riga di una colonna sotto la riga contenente i tuoi quattro moduli di post. Quindi duplica un modulo post dalla riga precedente e aggiungilo alla nuova riga. Nelle Impostazioni del modulo dei post nella scheda Contenuto, seleziona la categoria "Video". Ora hai un modulo di post che visualizzerà i video.

Nell'area di destra (barra laterale) della sezione specialità aggiungeremo altri due moduli post impilati uno sopra l'altro.

Per il primo, aggiorna le impostazioni del modulo post per includere "Tutte" le categorie. Quindi selezionare il metodo di ordinamento "Valutazione più alta".

Duplica quel modulo post in modo che un altro si accumuli sotto di esso. Quindi aggiorna il metodo di ordinamento su quello su "Più popolare".

Vai avanti e aggiorna il post per salvare le tue impostazioni. Ecco come dovrebbe essere il layout finora.

Quindi duplica (o copia) la seconda sezione principale contenente il modulo di testo con il titolo "Recensioni prodotti".

Quindi trascina (o incolla) la sezione duplicata nella sezione delle specialità. Nella nuova sezione, aggiorna il contenuto delle impostazioni del modulo di testo con il seguente codice html:

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

Salva le impostazioni

Successivamente aggiungeremo un feed del blog che mostra tutte le recensioni dei prodotti a partire dalla più recente.

Sotto il modulo di testo che hai appena aggiornato, aggiungi un modulo di muratura del feed del blog alla colonna. Nelle impostazioni del modulo Massoneria del feed del blog, nella scheda Contenuto, seleziona tutte le categorie che desideri vengano visualizzate nel feed.

Salva le impostazioni

E infine, sotto il modulo Massoneria del feed del blog, aggiungi un modulo Carousel dei post. Aggiorna le impostazioni del modulo Carousel dei post nella scheda Contenuto per includere tutte le categorie e seleziona S per visualizzare solo i post in primo piano.

Questo carosello ha lo scopo di visualizzare solo i post che hai selezionato come articoli in primo piano durante la creazione dei post di recensione del prodotto.

Ora vediamo come si presenta il layout finale.

Aggiunta di alcune righe di CSS personalizzati

Per unire il design, dobbiamo aggiungere alcune righe di CSS personalizzato. Vai a Personalizzatore tema> CSS aggiuntivo e aggiungi quanto segue nella parte superiore del codice CSS corrente già presente:

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

Quindi, all'interno delle parentesi della query multimediale impostate su una larghezza minima di 980 px, aggiungi quanto segue:

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

Il primo frammento CSS aggiunge un'ombra leggermente più scura e un bordo superiore più alto ai moduli. Il secondo personalizza il pulsante "Unisciti ora" nella sezione superiore.

Bene, questo è tutto per il layout della categoria Homepage. Ecco come si presenta il risultato finale:

Oltre al layout della categoria della home page, aggiungiamo un altro layout semplice per visualizzare tutte le nostre categorie in un'unica pagina.

Costruire il layout "Tutte le categorie"

Questo layout è davvero semplice da creare ora che hai caricato tutti i tuoi post, le tue categorie impostate e lo stile del tema in atto. Lo scopo di questo layout è creare una pagina che mostri tutte le categorie e i prodotti in un'unica pagina. Questo può essere fatto in molti modi diversi, ma con Extra volevo sfruttare il modulo carosello dei post per visualizzare le categorie e i post in un layout simile a quello che vedresti sui siti di streaming video come Hulu e Netflix.

Per aggiungere il layout, scorri fino alla parte superiore del layout della categoria corrente e seleziona Aggiungi nuovo. Utilizzando il Generatore di categorie, aggiungi una riga a una colonna a una sezione standard. Quindi aggiungi un modulo di testo alla riga. Aggiorna le impostazioni del modulo di testo, nella scheda Contenuto per includere il seguente tag h1 nella casella del contenuto:

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

Salva le impostazioni

Quindi aggiungi un modulo Carousel di post sotto il modulo di testo. Nelle Impostazioni del modulo Carousel dei post, seleziona Abbigliamento come Categoria.

Salva le impostazioni

Quindi aggiungi un modulo di testo sotto il carosello dei post della categoria Abbigliamento. Nelle Impostazioni modulo di testo, aggiungi il seguente collegamento alla casella Contenuto nella scheda Contenuto:

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

Potrebbe essere necessario modificare l'URL e/o il testo del collegamento in base al tuo sito, ma l'idea è quella di collegare la pagina della categoria per quella particolare categoria per mostrare tutte le recensioni dei prodotti per quella categoria.

Nella scheda Progettazione, modifica l'orientamento del testo su "Destra".

Salva le impostazioni

Per visualizzare le tre categorie successive allo stesso modo, ripeti il ​​processo di aggiunta di un modulo Carousel di post assegnato a una categoria specifica, seguito da un modulo di testo contenente un collegamento alla pagina della categoria corrispondente.

Nella casella della categoria a destra del builder, aggiungi una nuova categoria chiamata "Tutte le categorie" e selezionala per questo layout. In questo modo, ogni volta che ci colleghiamo alla pagina della categoria "Tutte le categorie", verrà visualizzato questo modello.

Il layout finale dovrebbe assomigliare a questo quando hai finito.

Ed ecco come appare il layout di categoria sul sito.

Puoi dirlo in questo momento perché non abbiamo ancora aggiunto molti prodotti, ma alla fine funzionerà come un modo conveniente per sfogliare i prodotti per ogni categoria utilizzando il modulo di scorrimento del carosello dei post.

Questo è tutto per il post di oggi. Spero che ti sia piaciuta la parte 3 di questa serie in 4 parti sulla creazione di un sito di recensioni di prodotti con Extra.

Spero che non ti stia ancora stancando, abbiamo un ultimo post da leggere nella nostra serie.

in arrivo

Nel post finale della nostra serie, personalizzeremo l'intestazione e gli elementi di navigazione del nostro sito di recensioni dei prodotti. Oltre a creare il tuo menu, ti mostrerò un modo interessante per assegnare i colori ai collegamenti del menu che corrispondono ai colori delle categorie in tutto il sito. Ti mostrerò anche come creare mega menu con pochi clic.

Non vedo l'ora di costruire insieme l'ultima parte del nostro sito web.

Come sempre, sentiti libero di inviare commenti qui sotto.