Scarica un'anteprima del libro GRATUITA Layout della pagina di destinazione Divi inclusi collegamenti di ancoraggio e CTA

Che tu stia vendendo un libro fisico o un e-book, avere una landing page efficace può fare miracoli. Puoi accedere a questa pagina di destinazione nel modo tradizionale oppure puoi trasformarla in una pagina di destinazione dell'anteprima del libro. Una pagina di destinazione dell'anteprima del libro consente alle persone di leggere alcune parti o capitoli del tuo libro in anticipo. È inoltre dotato di collegamenti di ancoraggio che semplificano la navigazione tra le diverse parti o capitoli. Per finire, vuoi anche mettere sotto i riflettori un CTA che indirizzerà il traffico ovunque tu stia vendendo il tuo libro.

In questo tutorial, ricreeremo da zero una straordinaria pagina di destinazione dell'anteprima del libro con Divi. Potrai anche scaricare gratuitamente il layout JSON se desideri aggiungerlo subito al tuo sito web.

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 pagina di destinazione dell'anteprima del libro

Per mettere le mani sul layout della pagina di destinazione dell'anteprima del libro gratuito, devi 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 i file

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.

SCARICA

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!

Iscriviti al nostro canale Youtube

Aggiungi nuova sezione regolare

Spaziatura

Inizia creando una nuova pagina e aggiungi una sezione normale. Apri le impostazioni della sezione e rimuovi tutto il riempimento superiore e inferiore personalizzato.

• Imbottitura superiore: 0px
• Imbottitura inferiore: 0px

Aggiungi riga

Struttura della colonna

Continua aggiungendo una nuova riga alla sezione utilizzando la seguente struttura a colonne:

Colore di sfondo

Senza aggiungere ancora alcun modulo, apri le impostazioni della riga e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Sfondo sfumato colonna 3

Aggiungi uno sfondo sfumato anche alla terza colonna.

• Colore 1: #6a30ff
• Colore 2: #a202ff
• Tipo di gradiente colonna 3: lineare
• Colonna 3 Direzione gradiente: 166°

Dimensionamento

Quindi, vai alle impostazioni di dimensionamento e consenti alla riga di occupare l'intera larghezza dello schermo aggiungendo le seguenti impostazioni di dimensionamento:

• Usa larghezza grondaia personalizzata: Sì
• Larghezza grondaia: 1
• Equalizza le altezze delle colonne: Sì
• Larghezza: 100%
• Larghezza massima: 100%

Spaziatura

Passa alle impostazioni di spaziatura e rimuovi l'imbottitura superiore e inferiore personalizzata della riga. Aggiungi anche alcuni valori di riempimento alla prima e alla terza colonna.

• Imbottitura superiore: 0vw
• Imbottitura inferiore: 0vw
• Imbottitura superiore colonna 1: 15vw (desktop), 10vw (tablet e telefono)
• Imbottitura inferiore colonna 2: 15vw (desktop), 10vw (tablet e telefono)
• Colonna 1 Imbottitura sinistra: 7vw

ID CSS colonna 2

Come puoi notare nell'anteprima di questo post, c'è una barra di scorrimento attaccata alla seconda colonna. Se vuoi dare uno stile a questa barra di scorrimento più avanti nel post, vai avanti e aggiungi un ID CSS alla seconda colonna.

• ID CSS colonna 2: style-scrollbar

Colonna 2 Elemento principale

La prossima cosa che faremo è consentire lo scorrimento della colonna aggiungendo le seguenti righe di codice CSS all'elemento principale della colonna 2:

overflow-y: scroll;
height: 57.87vw;
scroll-behavior: smooth;

Aggiungi il modulo di testo n. 1 alla colonna 1

Aggiungi contenuto

Ora che abbiamo modificato tutte le impostazioni delle righe, possiamo iniziare ad aggiungere i moduli! Inizia con un modulo di testo nella colonna 1 e aggiungi alcuni contenuti a tua scelta.

Impostazioni testo

Vai alle impostazioni del testo del modulo e apporta alcune modifiche.

• Carattere del testo: Lato
• Colore: #666666
• Dimensione del testo: 1.6vw (desktop), 3vw (tablet), 4vw (telefono)
• Altezza riga di testo: 2vw

Aggiungi modulo divisore alla colonna 1

Visibilità

Il prossimo modulo che aggiungeremo è un modulo divisore. Assicurati che l'opzione "Mostra divisore" sia abilitata.

• Mostra divisore: Sì

Colore

Quindi, vai alla scheda Design e cambia il colore.

• Colore: #5802ed

Dimensionamento

Gioca anche con i valori di dimensionamento.

• Peso del divisore: 4px
• Larghezza: 3vw (desktop), 6vw (tablet), 9vw (telefono)
• Altezza: 0px

Spaziatura

E aggiungi un'imbottitura superiore e inferiore personalizzata per creare spazio.

• Margine superiore: 1vw (desktop), 3vw (tablet), 4vw (telefono)
• Margine inferiore: 7vw

Aggiungi il modulo di testo n. 2 alla colonna 1

Aggiungi contenuto

Al terzo modulo, che è un altro modulo di testo. Qui abbiamo aggiunto un simbolo (►) seguito dal titolo del primo capitolo alla casella del contenuto.

Aggiungi collegamento

Stiamo collegando questo intero modulo a un anchor ID che aggiungeremo più avanti in questo post.

• URL del collegamento al modulo: https://yourwebsite.com/pagetitle/#chapter-1

Impostazioni testo

Continua andando alle impostazioni del testo e modella il contenuto esattamente nel modo desiderato.

• Carattere del testo: Lato
• Peso del carattere del testo: leggero
• Colore del testo: #666666
• Dimensione del testo: 1.3vw (desktop), 2vw (tablet), 3.3vw (telefono)

Spaziatura

Aggiungi anche un'imbottitura personalizzata in alto e in basso.

• Imbottitura superiore: 1vw
• Imbottitura inferiore: 1vw

Clona il modulo di testo n. 2 due volte

Dopo aver modificato il modulo di testo, clonalo due volte (o fino a tutti i capitoli che desideri condividere).

Modifica contenuto

Modifica il contenuto di ciascuno dei duplicati.

Cambia link

Insieme all'ID di ancoraggio alla fine dell'URL del collegamento del modulo. In questo caso, ciò significa aggiungere '#chapter-2' al primo duplicato e '#chapter-3' al secondo.

Aggiungi modulo di testo alla colonna 2

Aggiungi contenuto

Alla colonna successiva, che è scorrevole. Qui, useremo i moduli di testo per aggiungere diverse pagine dell'anteprima del libro. Inizia aggiungendo il primo modulo di testo con alcuni contenuti a tua scelta.

Colore di sfondo

Quindi, vai alle impostazioni dello sfondo e aggiungi un colore di sfondo bianco.

• Colore di sfondo: #ffffff

Impostazioni testo

Modifica anche le impostazioni del testo.

• Carattere del testo: Lato
• Dimensione del testo: 0.8vw (desktop), 1.6vw (tablet), 2.1vw (telefono)
• Altezza riga di testo: 1.7vw (desktop), 3.3vw (tablet), 3.8vw (telefono)

Impostazioni testo H2

Gioca anche con le impostazioni del testo di H2.

• Intestazione 2 Carattere: Lato
• Intestazione 2 Peso del carattere: pesante
• Colore testo titolo 2: #5802ed
• Titolo 2: Dimensione testo: 2vw (desktop), 2.5vw (tablet), 2.9vw (telefono)
• Altezza della linea di intestazione 2: 2,3 vw

Spaziatura

Continua andando alle impostazioni di spaziatura e aggiungendo i seguenti valori di margine e riempimento personalizzati:

• Margine superiore: 2vw (desktop), 7vw (tablet), 10vw (telefono)
• Margine inferiore: 2vw (desktop), 7vw (tablet), 10vw (telefono)
• Margine sinistro: 5vw
• Margine destro: 5vw
• Imbottitura superiore: 6vw
• Imbottitura inferiore: 6vw
• Imbottitura sinistra: 6vw
• Imbottitura destra: 6vw

Scatola ombra

Modella il modulo di testo aggiungendo un'ombra sottile.

• Forza sfocatura ombra scatola: 50 px
• Colore ombra: rgba(0,0,0,0.09)

ID CSS

Continua aggiungendo un ID CSS al modulo di testo. Assicurati di utilizzare lo stesso ID CSS di quello a cui ti stavi collegando nella prima colonna della riga.

• ID CSS: capitolo-1

Clona modulo di testo due volte

Una volta che hai stilizzato il modulo di testo, clonalo tutte le volte che vuoi.

Modifica contenuto

Modificare il contenuto di ciascun modulo di testo duplicato.

Modifica ID CSS

Insieme agli ID CSS.

• ID CSS: capitolo-2
• ID CSS: capitolo-3

Aggiungi modulo di testo alla colonna 3

Aggiungi contenuto

Alla prossima e ultima colonna! Aggiungi un modulo di testo con alcuni contenuti a tua scelta.

Impostazioni testo

Quindi, vai alla scheda Design e modifica le impostazioni del testo.

• Carattere del testo: Lato
• Peso del carattere del testo: pesante
• Colore del testo: #ffffff
• Dimensione del testo: 2vw (desktop), 3vw (tablet), 4vw (telefono)
• Altezza riga di testo: 2vw
• Orientamento del testo: al centro

Spaziatura

Aggiungi un po' di imbottitura sinistra e destra personalizzata in seguito.

• Sinistra: 2vw
• Destra: 2vw

Aggiungi modulo pulsante alla colonna 3

Aggiungi copia

Continua aggiungendo un modulo pulsante alla terza colonna con una copia a tua scelta.

Allineamento

Modificare l'allineamento del pulsante successivo.

• Allineamento dei pulsanti: centro

Impostazioni dei pulsanti

Modifica anche le impostazioni dei pulsanti.

• Usa stili personalizzati per il pulsante: Sì
• Dimensione del testo del pulsante: 1vw (desktop), 1.5vw (tablet), 2.4vw (telefono)
• Colore del testo del pulsante: #5802ed
• Colore di sfondo del pulsante: #ffffff
• Larghezza bordo pulsante: 0px
• Raggio del bordo del pulsante: 10vw
• Spaziatura lettere pulsanti: 0px
• Peso del carattere: Ultra grassetto
• Stile carattere: maiuscolo

Spaziatura

E aggiungi alcuni margini personalizzati e valori di riempimento per modellare e posizionare il modulo.

• Margine superiore: 2vw (desktop), 4vw (tablet), 5vw (telefono)
• Imbottitura superiore: 1vw (Desktop), 2vw (Tablet), 3vw (Telefono)
• Imbottitura inferiore: 1vw (desktop), 2vw (tablet), 3vw (telefono)
• Imbottitura sinistra: 3vw (Desktop), 7vw (Tablet), 9vw (Telefono)
• Imbottitura destra: 3vw (Desktop), 7vw (Tablet), 9vw (Telefono)

Stile barra di scorrimento

Apri le impostazioni della pagina

L'ultima parte di questo tutorial è dedicata allo stile della barra di scorrimento della seconda colonna. Lo stile o meno della barra di scorrimento della colonna dipende interamente da te. Non disegnando non cambia nulla della funzionalità. Se decidi di dare uno stile alla barra di scorrimento, apri le impostazioni della pagina.

Aggiungi codice CSS

Quindi, vai alla scheda Avanzate e aggiungi del CSS personalizzato alla casella CSS personalizzato e il gioco è fatto!

#style-scrollbar::-webkit-scrollbar {
width: 1.1vw;
}
#style-scrollbar::-webkit-scrollbar-track {
background: #f1f1f1;
}
#style-scrollbar::-webkit-scrollbar-thumb {
background: #333333;
}

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 creare una pagina di destinazione di anteprima del libro straordinaria ed efficace con collegamenti di ancoraggio a diverse parti o capitoli del tuo libro e un CTA che si distingue. Abbiamo anche condiviso gratuitamente il layout JSON in modo che tu possa iniziare ad aggiungerlo subito a qualsiasi sito web che stai creando! 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.