Come progettare recensioni di libri accattivanti per la tua pagina di destinazione dell'ebook Divi
Pubblicato: 2019-06-05Ogni settimana ti forniamo pacchetti di layout Divi nuovi e gratuiti che puoi utilizzare per il tuo prossimo progetto. Per uno dei pacchetti di layout, condividiamo anche un caso d'uso che ti aiuterà a portare il tuo sito Web al livello successivo.
Questa settimana, come parte della nostra iniziativa di design Divi in corso, ti mostreremo come progettare recensioni di libri accattivanti per la tua prossima pagina di destinazione dell'ebook utilizzando solo Ebook Layout Pack di Divi e le opzioni integrate di Divi. Questo è un ottimo modo per aggiungere prove sociali alle tue pagine di destinazione, aumentare la credibilità e condividere le brevi recensioni delle persone in modo elegante.
Arriviamo ad esso!
Anteprima
Prima di immergerci nel tutorial, diamo una rapida occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Scarica GRATUITAMENTE il layout della sezione delle recensioni dei libri
Per mettere le mani sul layout della sezione delle recensioni di libri gratuiti, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.
Scarica gratis
Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.
Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!
Iniziamo a ricreare!
Carica il layout della pagina di destinazione del pacchetto di layout ebook su una nuova pagina
La prima cosa che devi fare è creare una nuova pagina utilizzando il layout della pagina di destinazione di Ebook Layout Pack che puoi trovare all'interno dei layout predefiniti.
Aggiungi nuova sezione
Scorri verso il basso il layout della pagina e aggiungi una nuova sezione dove vuoi che vengano visualizzate le recensioni dei libri.
Aggiungi nuova riga
Struttura della colonna
Continua aggiungendo una nuova riga utilizzando la seguente struttura di colonne:
Sfondo sfumato colonna 1
Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi uno sfondo sfumato alla prima colonna.
- Colore 1: #ffffff
- Colore 2: #f4f4f4
- Colonna 1 Posizione iniziale: 12%
- Posizione finale della colonna 1: 12%
Colore di sfondo della colonna 2
Aggiungi anche un colore di sfondo personalizzato alla seconda colonna.
- Colore di sfondo della colonna 2: #9400ff
Dimensionamento
Passa alla scheda Progettazione e rimuovi tutto lo spazio personalizzato tra le colonne utilizzando le seguenti impostazioni:
- Usa larghezza grondaia personalizzata: Sì
- Larghezza grondaia: 1
Spaziatura
Stiamo anche modificando le impostazioni di spaziatura delle righe.
- Margine superiore: 100 px
- Margine inferiore: 100 px
- Imbottitura superiore: 0px
- Imbottitura inferiore: 0px
Aggiungi modulo immagine alla colonna 1
Carica immagine 1:1
Una volta che le impostazioni della riga sono a posto, puoi iniziare ad aggiungere i vari moduli, iniziando con un modulo immagine nella prima colonna. Carica un'immagine a tua scelta ma assicurati che il rapporto dell'immagine sia 1:1. Ciò significa che l'altezza e la larghezza dovrebbero avere lo stesso valore.
Allineamento dell'immagine
Seleziona l'allineamento dell'immagine a sinistra nella scheda Progettazione.
- Allineamento immagine: a sinistra
Dimensionamento
Stiamo anche modificando la larghezza di questo modulo su schermi di diverse dimensioni.
- Larghezza: 20% (desktop e tablet), 30% (telefono)
Spaziatura
Per consentire una sovrapposizione sul lato sinistro della riga, stiamo aggiungendo un valore del margine sinistro negativo nelle impostazioni di spaziatura del Modulo immagine.
- Margine sinistro: -30px
Frontiera
Per completare il design dell'immagine, aggiungiamo anche '50vw' a ciascuno degli angoli nelle impostazioni del bordo. Ciò assicurerà che l'immagine mantenga la sua forma circolare su schermi di diverse dimensioni.
Aggiungi il modulo di testo n. 1 alla colonna 1
Aggiungi simboli a stella alla casella del contenuto
Al modulo successivo, che è il modulo di testo di valutazione. Per mostrare le valutazioni a stelle, useremo i simboli. Vai avanti e copia i seguenti simboli e incollali nella casella del contenuto di un nuovo modulo di testo: ★★★★✰.
Colore di sfondo
Successivamente cambia lo sfondo del modulo.
- Colore di sfondo: #9400ff
Impostazioni testo
Passa alla scheda Design e modifica anche le impostazioni del testo.
- Carattere del testo: Montserrat
- Peso del carattere del testo: pesante
- Dimensioni del testo: 45 px (desktop), 30 px (tablet), 25 px (telefono)
- Altezza riga di testo: 1em
- Allineamento del testo: Centro
Dimensionamento
Continua modificando la larghezza del modulo.
- Larghezza: 35%
Spaziatura
E aggiungi una spaziatura personalizzata.
- Margine sinistro: 50 px
- Margine destro: 50 px
- Imbottitura superiore: 20px
- Imbottitura inferiore: 20px
Scatola ombra
Per evidenziare la casella di valutazione, aggiungeremo un'ombra sottile.
- Forza sfocatura ombra scatola: 50 px
- Colore ombra: rgba(0,0,0,0.3)
Trasforma Traduci
E, ultimo ma non meno importante, riposizioneremo il modulo di testo utilizzando alcuni valori di traduzione di trasformazione personalizzati. Puoi posticipare questo passaggio fino a quando non avrai aggiunto anche tutti i moduli alla tua colonna.
- A destra: 360 px (desktop), -84 px (tablet), -70 px (telefono)
- Botto,: -113px (Desktop), 190px (Tablet), 141px (Telefono)
Aggiungi il modulo di testo n. 2 alla colonna 1
Aggiungi contenuto
Il modulo successivo di cui abbiamo bisogno nella colonna 1 è un altro modulo di testo. Aggiungi il contenuto che preferisci e collegalo al revisore e al libro.
Impostazioni testo
Passa alla scheda Design e modifica le impostazioni del testo di conseguenza:
- Carattere del testo: Montserrat
- Dimensione del testo: 18px
Link alle impostazioni del testo
Cambia anche il colore del testo del collegamento.
- Colore del testo del collegamento: #9400ff
Spaziatura
Quindi, vai alle impostazioni di spaziatura e riposiziona l'elemento utilizzando valori di margine personalizzati.
- Margine superiore: -100 px (desktop), 0 px (tablet e telefono)
- Margine sinistro: 200 pixel (desktop), 50 pixel (tablet), 20 pixel (telefono)
- Margine destro: 50 px (tablet), 20 px (telefono)
Aggiungi il modulo di testo n. 3 alla colonna 1
Aggiungi contenuto H3
Al modulo successivo, che è un modulo di testo contenente il titolo della recensione H3.
Impostazioni testo H3
Passa alla scheda Design e modifica le impostazioni del testo H3.
- Intestazione 3 Carattere: Montserrat
- Intestazione 3 Peso del carattere: grassetto
- Colore testo titolo 3: #000000
Spaziatura
Aggiungi anche un margine personalizzato.
- Margine superiore: 80 px (desktop), 50 px (tablet e telefono)
- Margine sinistro: 50 px (desktop e tablet), 20 px (telefono)
- Margine destro: 50 px (desktop e tablet), 20 px (telefono)
Aggiungi il modulo di testo n. 4 alla colonna 1
Aggiungi contenuto
Al prossimo e ultimo modulo abbiamo bisogno nella colonna 1, che è un altro modulo di testo con la recensione effettiva.
Spaziatura
Vai alle impostazioni di spaziatura di questo modulo e applica le seguenti impostazioni:
- Margine superiore: 20px
- Margine inferiore: 50 px
- Margine sinistro: 50 px (desktop e tablet), 20 px (telefono)
- Margine destro: 50 px (desktop e tablet), 20 px (telefono)
Aggiungi modulo immagine alla colonna 2
Carica l'immagine della copertina del libro
Nella seconda colonna, avremo bisogno di due moduli, iniziando con un modulo immagine che porta la copertina del libro. Per questo tutorial, stiamo utilizzando le copertine dei libri fornite con Divi's Ebook Layout Pack, ma puoi invece aggiungere la tua copertina del libro.
Dimensionamento
Passa alla scheda Design del Modulo immagine e modifica la larghezza.
- Larghezza: 79% (desktop), 40% (tablet e telefono)
Spaziatura
Modifica anche le impostazioni di spaziatura.
- Margine superiore: 60 px
- Margine inferiore: 60 px
Scatola ombra
E aggiungi un'ombra di scatola per enfatizzare la copertina del libro.
- Posizione verticale dell'ombra del riquadro: 40 px
- Intensità della sfocatura dell'ombra della scatola: 80 px
- Forza di diffusione dell'ombra della scatola: -20px
- Colore ombra: rgba(0,0,0,0,8)
Aggiungi modulo pulsante alla colonna 2
Aggiungi copia
Il modulo successivo e ultimo di cui abbiamo bisogno nella colonna 2 è Modulo pulsante. Aggiungi una copia a tua scelta e collega alla pagina in cui le persone possono acquistare il tuo libro.
Allineamento dei pulsanti
Passa alla scheda Design e modifica l'allineamento del pulsante.
- Allineamento dei pulsanti: centro
Impostazioni dei pulsanti
Modifica le impostazioni dei pulsanti in modo che corrispondano all'aspetto del pacchetto di layout.
- Usa stili personalizzati per pulsante: Sì
- Dimensione del testo del pulsante: 16 px
- Colore del testo del pulsante: #ffffff
- Colore di sfondo del pulsante: #000000
- Larghezza bordo pulsante: 0px
- Raggio bordo pulsante: 0px
- Carattere pulsante: Montserrat
- Peso del carattere del pulsante: grassetto
Spaziatura
E completa il progetto della prima recensione del libro aggiungendo alcuni valori di riempimento personalizzati al pulsante.
- Imbottitura superiore: 16px
- Imbottitura inferiore: 16px
- Imbottitura sinistra: 38px
- Imbottitura destra: 38px
Clone Row fino al numero di volte desiderato
Una volta che hai finito di creare la prima recensione del libro, puoi clonare l'intera riga fino a tutte le volte che vuoi, a seconda di quante recensioni vuoi mostrare sulla tua pagina di destinazione.
Carica un'immagine diversa
Modificare l'immagine del revisore.
Cambia la copertina del libro
Insieme alla copertina del libro, se necessario.
Cambia copia
E modifica anche tutta la copia.
Trova e sostituisci colore di sfondo della colonna 2 nella riga
Come puoi notare nell'anteprima di questo post, stiamo usando una tavolozza di colori diversa per questa seconda recensione. Per semplificarci, apriremo le impostazioni della riga e faremo clic con il pulsante destro del mouse sullo sfondo della colonna 2, quindi faremo clic su Trova e sostituisci.
Cambia il colore viola che viene utilizzato all'interno della riga e il gioco è fatto! Assicurati di ripetere questi passaggi per ciascuna delle recensioni di libri duplicate che aggiungi alla tua pagina.
- All'interno: questa riga
- Sostituisci con: #31d190
Anteprima
Ora che abbiamo seguito tutti i passaggi, diamo un'ultima occhiata al risultato su schermi di diverse dimensioni.
Desktop
Mobile
Pensieri finali
In questo post, ti abbiamo mostrato come progettare splendide recensioni di libri brevi per le tue prossime pagine di destinazione degli ebook. Questo ti aiuta ad aggiungere prove sociali alla tua pagina e a convincere i visitatori della credibilità del tuo libro. Questo tutorial sui casi d'uso fa parte della nostra iniziativa di progettazione Divi in corso, in cui ogni settimana cerchiamo di aggiungere qualcosa in più alla tua cassetta degli attrezzi di progettazione. Se hai domande o suggerimenti, assicurati di lasciare un commento nella sezione commenti qui sotto!
Se non vedi l'ora di saperne di più su Divi e di ricevere altri omaggi su Divi, assicurati di iscriverti alla nostra newsletter e al canale YouTube in modo da essere sempre una delle prime persone a conoscere e ottenere vantaggi da questo contenuto gratuito.