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

Benvenuto nella seconda 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 1 di questa serie abbiamo iniziato il nostro viaggio nella creazione di un sito di recensioni di prodotti impostando le opzioni del tema e le impostazioni di personalizzazione del tema.

Oggi partiremo con l'aggiunta della nostra prima recensione del prodotto come nuovo post e personalizzando il layout del post per quel post utilizzando Divi Builder e le impostazioni del tema Extra. Una volta completato questo tutorial, avrai un modello di post salvato che puoi estrarre dalla tua libreria per creare facilmente il resto dei tuoi post.

Ecco un'anteprima di ciò che stiamo per costruire

Preparazione degli elementi di design

Poiché aggiungeremo i nostri prodotti in questa parte della serie, avrai bisogno delle immagini dei tuoi prodotti. Per questo tutorial, avrò 4 categorie con 3 prodotti in ogni categoria, quindi utilizzerò un totale di 12 immagini. Sto usando immagini stock di shutterstock con sfondi bianchi per dargli un aspetto più pulito.

Per progettare il layout del post utilizzeremo il Visual Builder e un po' di Custom CSS.

Iniziamo.

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

Iscriviti al nostro canale Youtube

Aggiungere la tua prima recensione del prodotto come nuovo post

Dalla dashboard di WordPress, vai su Post > Aggiungi nuovo .

Ogni post sarà la tua recensione del prodotto, quindi il nome del tuo post dovrebbe essere il nome del tuo prodotto. Poiché il mio prodotto sarà un fitness tracker, inserirò "Fitness Tracker" come titolo del mio post.

Nota : se non l'hai già fatto, ora è un buon momento per impostare le impostazioni del permalink sull'opzione "Nome post" in modo che il tuo URL contenga solo il nome del prodotto (ovviamente la tua preferenza).

Quindi, fai clic sul pulsante "Usa Divi Builder" e quindi sul pulsante "Usa Visual Builder" per distribuire Visual Builder.

Da Visual Builder, inserisci una riga a una colonna e aggiungi un modulo di testo alla colonna.

Nella scheda del contenuto delle Impostazioni del modulo di testo, inserisci il seguente html nella casella del contenuto (assicurati di lavorare nella scheda "testo" e non nella scheda "visuale"):

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

Questo servirà come i nostri sottotitoli "fantasiosi" per le diverse sezioni. Lo stileremo con CSS personalizzato in seguito.

Proprio sotto il tag h2 puoi aggiungere il testo della descrizione del prodotto. Sto usando un po' di “lorem ipsum” per ora.

Aggiungi un'altra riga di una colonna sotto la riga corrente e aggiungi un altro modulo di testo al suo interno. Nelle impostazioni del modulo di testo, aggiungi un altro sottotitolo html inserendo il seguente tag h2 "Pro e contro" nella scheda di testo della sezione del contenuto.

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

Questo inizierà la sezione Pro e contro della tua recensione del prodotto.

Quindi aggiungi una riga metà metà (due colonne) sotto quella precedente. Nella colonna di sinistra aggiungi un modulo di testo e inserisci un titolo h3 con il testo "Pro".

Ora duplica quel modulo di testo e trascina il modulo duplicato nella colonna di destra. Cambia il titolo h3 nel nuovo modulo di testo in "Contro".

Suggerimento : nel Visual Builder puoi semplicemente fare clic sulla casella di testo e digitare il nuovo titolo invece di aprire le impostazioni.

Successivamente useremo il modulo blurb per aggiungere alcuni sotto-elementi sotto i titoli Pro e Contro.

Nella colonna di sinistra, sotto il modulo di testo "Pro", aggiungi un modulo Blurb. Nella scheda contenuto delle Impostazioni Blurb, aggiungi una riga di testo (sto usando un testo fittizio per ora) nella casella del contenuto.

Quindi scorrere verso il basso e selezionare "Usa icona". Nella casella Icona visualizzata, seleziona il simbolo più.

Fare clic sulla scheda Progettazione e aggiornare quanto segue:

Colore icona: #ffffff

Icona del cerchio: S

Colore del cerchio: #5bd999

Posizionamento immagine/icona: a sinistra

Salva le impostazioni

Duplica (o copia) quel modulo blurb e trascinalo (o incollalo) sotto il modulo di testo "Contro". Quindi aggiorna la scheda Design delle impostazioni di Blurb con il seguente colore del cerchio: #e6567a

Salva le impostazioni

Ora duplica i moduli blurb in ogni colonna alcune volte poiché non sappiamo quanti potresti aver bisogno per un determinato prodotto.

Ora vai alle impostazioni della riga che contengono i tuoi pro e contro. Nella scheda Contenuto , aggiorna quanto segue:

Sfondo della colonna 1: #f8f8f8

Sfondo della colonna 2: #f8f8f8

Nella scheda Progettazione , aggiorna quanto segue:

Usa larghezza grondaia personalizzata: S

Larghezza grondaia: 1

Equalizza le altezze delle colonne: S

Imbottitura colonna 1: 20 px (in alto), 20 px (a destra), 20 px (in basso), 20 px (a sinistra)

Imbottitura colonna 2: 20 px (in alto), 20 px (a destra), 20 px (in basso), 20 px (a sinistra)

Nella scheda Avanzate , aggiungi il seguente CSS personalizzato alla casella di testo Elemento principale della colonna 1 :

 border-top: 10px solid #5bd999; 

Aggiungi il seguente CSS alla casella di testo dell'elemento principale della colonna 2 :

 border-top: 10px solid #e6567a; 

Suggerimento : se disponi di una versione aggiornata di Extra, dovresti avere la possibilità di applicare le nuove animazioni al tuo sito web. Aggiungi un'animazione alla riga Pro e contro andando su Impostazioni riga nella scheda Design e selezionando lo stile di animazione che desideri. Questo farà apparire la tua sezione Pro e Contro mentre l'utente scorre la pagina verso il basso.

Salva le impostazioni

Duplica (o copia) la seconda riga che contiene il sottotitolo "Pro e contro" e trascinala (o incollala) sotto la riga appena terminata. Quindi cambia l'intestazione h2 in "Specifiche".

Duplica la riga a due colonne che contiene gli elementi dell'elenco dei pro e dei contro e inseriscila sotto il nuovo modulo di testo con il titolo "Specifiche". Elimina i due moduli di testo che contengono le intestazioni "Pro" e "Contro" dalla colonna.

Ora fai clic su Impostazioni Blurb per il primo modulo blurb nella colonna di sinistra.

Nella scheda Contenuto , cambia l'icona in un segno di spunta.

Nella scheda Design , cambia il Colore del cerchio in #222222.

Salva le impostazioni

Ora elimina gli altri moduli blurb e sostituiscili con quello appena aggiornato duplicandoli e trascinandoli nei punti giusti.

Ora vai alle Impostazioni riga e sostituisci il CSS personalizzato sia nella casella di testo dell'elemento principale della colonna 1 che nella casella di testo dell'elemento principale della colonna 2 con quanto segue:

border-top: 10px solid #222222;

Salva le impostazioni

Ora l'ultima cosa che dobbiamo aggiungere a questo layout di post è un pulsante "acquista". Vai avanti e crea una nuova riga a una colonna e aggiungi un modulo pulsante . Quindi aggiornare le impostazioni del modulo pulsanti come segue:

Nella scheda Contenuto...

Testo del pulsante: Acquista ora

URL pulsante: [inserisci URL] (molto probabilmente questo sarà alla fine un link di affiliazione a un sito di terze parti)

Apertura URL: nella nuova scheda

Nella scheda Progettazione...

Allineamento dei pulsanti: centro

Colore del testo: scuro

Usa stili personalizzati per il pulsante: S

Dimensione del testo del pulsante: 30px

Colore del testo del pulsante: #222222

Colore del testo al passaggio del mouse del pulsante: #5bd999

Colore di sfondo al passaggio del mouse: #ffffff

Colore del bordo del pulsante al passaggio del mouse: #5bd999

Questo è tutto per la sezione dei contenuti del layout del post del prodotto. Assicurati di salvare la pagina . Una volta salvata la pagina, esci dal visual builder per modificare il post dalla dashboard di wordpress.

Aggiungere recensioni al tuo post

Scorri verso il basso fino alla fine della pagina dell'editor del post e trova la casella intitolata "Rivedi contenuto della casella" .

Questa intelligente aggiunta a Extra ti consente di aggiungere una valutazione del prodotto ai tuoi post. Il sistema di valutazione è progettato per avere uno o più guasti. Una ripartizione è un componente che costituisce la valutazione complessiva. Ad esempio, se stai per valutare una videocamera, i guasti di esempio includeranno cose come design, prestazioni, durata della batteria, ecc. Questi sono componenti della videocamera a cui puoi aggiungere una percentuale di valutazione separata. Extra calcolerà quindi la percentuale di valutazione complessiva in base a tali componenti e la visualizzerà nella casella Revisione. La casella di revisione dispone anche di aree di input utili per il titolo della casella di revisione, il riepilogo e il titolo di riepilogo.

Per aggiungere la tua recensione, aggiorna il Contenuto della casella di revisione con quanto segue:

Titolo della casella di revisione: [inserire il titolo per la casella di revisione] (suggerisco "Recensione del prodotto" o "Revisione editoriale")

Sommario: [inserisci sommario]

Titolo riepilogo: [inserire un titolo per il riepilogo] (sto solo usando "Riepilogo" per semplificare)

Quindi aggiungi quattro suddivisioni con un titolo e una percentuale di valutazione come segue:

Ripartizione #0

Titolo: Design

Voto: 85%

Ripartizione #1

Titolo: Performance

Voto: 90%

Ripartizione #2

Titolo: Durata della batteria

Valutazione: 70%

Ripartizione #3

Titolo: Caratteristiche

Voto: 85%

Ora che hai la tua valutazione in atto, diamo gli ultimi ritocchi al nostro post prima della pubblicazione.

Assegna una categoria al tuo post

Assicurati di assegnare la categoria giusta al tuo articolo/prodotto facendo clic sulla casella di controllo accanto alla categoria. In questo caso, poiché questo post è per un fitness tracker, selezionerò la categoria "Salute e fitness". Inoltre, deseleziona la casella "non categorizzato".

Ecco una ripartizione dei prodotti e delle loro categorie che sto utilizzando:

• Capi di abbigliamento
  • Scarpe
  • Orologio
  • Calzini fantastici
• Cucina
  • Coltelli da cucina
  • Mixer
  • Tagliere
• Salute e fitness
  • Inseguitore di fitness
  • Pesi
  • Tapis roulant
• Elettronica
  • Telecamera
  • Cuffie
  • Computer portatile

Non molto in fondo alla pagina troverai la casella Impostazioni extra. Questi controlli ti consentono di sovrascrivere le impostazioni del tema predefinito per questo particolare post. Ovviamente puoi personalizzarlo come preferisci, ma per questo esempio, seleziono le seguenti caselle:

Post in primo piano (questo consente di estrarre il prodotto come post in primo piano su determinati moduli di categoria.)

Nascondi riquadro autore

Infine, aggiungi la tua immagine in primo piano. Assicurati che sia largo almeno 1280 px poiché utilizzeremo un layout a una colonna a larghezza intera per l'immagine in primo piano.

Pubblica il tuo post.

Vai avanti e salva questo modello in modo da poter duplicare questo processo per tutti i tuoi prodotti/post. Per salvare il modello, fai clic sull'icona "Salva nella libreria" nel menu del generatore visivo nella parte inferiore della pagina, inserisci un nome per il modello e fai clic su Salva nella libreria.

Ora quando vai ad aggiungere il resto dei tuoi post, puoi caricare questo modello dalla libreria e compilare il contenuto per la nuova recensione del prodotto. Il processo diventa quindi molto più veloce.

Aggiunta di CSS personalizzati

Abbiamo quasi finito. Abbiamo bisogno di aggiungere alcuni CSS personalizzati al nostro tema per modellare alcuni elementi del post. Per fare ciò, dalla dashboard di WordPress, vai su Personalizzatore di temi > CSS aggiuntivo e inserisci quanto segue:

/****************************
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 e pubblica

Ora controlliamo il nostro risultato.

Il sistema di valutazione degli utenti

Nota che in fondo al post hai un sistema di razione di stelle utente.

Qui i tuoi visitatori possono inviare una valutazione iniziale su qualsiasi prodotto semplicemente passando il mouse sulle icone delle stelle e facendo clic sul livello di stelle di loro scelta.

La valutazione complessiva dell'utente verrà visualizzata nei metadati sull'estratto del post.

Puoi sempre scegliere di disabilitare questa funzione nella casella Impostazioni aggiuntive.

Bene, questo è tutto. Spero che la seconda parte di questa serie vi sia piaciuta.

Prossimamente: creazione di layout di categoria per visualizzare i tuoi prodotti

Nella parte 3, ti mostrerò come creare i layout di categoria per la home page e la pagina Tutte le categorie. Assicurati di utilizzare il tuo nuovo modello di post per aggiungere almeno 3 prodotti per ciascuna delle 4 categorie per prepararti alla parte 3 della serie. Avrai bisogno di quelli per popolare i moduli di categoria che mostreranno i tuoi prodotti.

Ecco cosa puoi aspettarti di costruire nella parte 3:

Sentiti libero di inviare domande o commenti qui sotto. Aspetto tue notizie.