Descărcați o previzualizare a cărții GRATUITĂ Aspectul paginii de destinație Divi, inclusiv linkuri de ancorare și CTA-uri

Fie că vindeți o carte fizică sau o carte electronică, dacă aveți o pagină de destinație eficientă pentru aceasta, puteți face minuni. Puteți aborda această pagină de destinație în mod tradițional sau o puteți transforma într-o pagină de destinație de previzualizare a cărții. O pagină de destinație pentru previzualizarea cărții permite utilizatorilor să citească în avans anumite părți sau capitole ale cărții dvs. De asemenea, este echipat cu legături de ancorare care fac navigarea prin diferite părți sau capitole fără probleme. În plus, doriți să puneți un CTA în centrul atenției, care va conduce traficul oriunde v-ați vinde cartea.

În acest tutorial, vom recrea de la zero o uimitoare pagină de destinație pentru previzualizarea cărții cu Divi. De asemenea, veți putea descărca gratuit aspectul JSON dacă doriți să îl adăugați imediat pe site-ul dvs.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați GRATUIT aspectul paginii de destinație pentru previzualizarea cărții

Pentru a pune mâna pe aspectul paginii de destinație gratuite pentru previzualizarea cărții, va trebui mai întâi să o descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Să începem să recreăm!

Abonați-vă la canalul nostru Youtube

Adăugați o nouă secțiune regulată

Spațiere

Începeți prin crearea unei pagini noi și adăugați o secțiune obișnuită la ea. Deschideți setările secțiunii și eliminați toate căptușelile personalizate de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați rând

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

Culoare de fundal

Fără a adăuga încă module, deschideți setările rândurilor și adăugați o culoare de fundal albă.

• Culoare fundal: #ffffff

Coloana 3 Gradient Background

Adăugați un fundal de gradient și la a treia coloană.

• Culoare 1: # 6a30ff
• Culoare 2: # a202ff
• Coloana 3 Tip de gradient: Liniar
• Coloana 3 Direcție gradient: 166deg

Dimensionare

Apoi, accesați setările de dimensionare și permiteți rândului să ocupe întreaga lățime a ecranului adăugând următoarele setări de dimensionare:

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Egalizați înălțimile coloanei: Da
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Treceți la setările de spațiere și eliminați umplutura personalizată de sus și de jos a rândului. Adăugați câteva valori de umplere și la prima și a treia coloană.

• Căptușeală de sus: 0vw
• Căptușeală inferioară: 0vw
• Coloana 1 Căptușeală superioară: 15vw (desktop), 10vw (tabletă și telefon)
• Coloana 2 Căptușeală inferioară: 15vw (desktop), 10vw (tabletă și telefon)
• Coloana 1 Căptușeală stângă: 7vw

Coloana 2 ID CSS

După cum puteți observa în previzualizarea acestui post, există o bară de derulare atașată la a doua coloană. Dacă doriți să stilizați această bară de derulare mai târziu în postare, continuați și adăugați un ID CSS în a doua coloană.

• Coloana 2 CSS ID: style-scrollbar

Coloana 2 Element principal

Următorul lucru pe care îl vom face este să permitem coloanei să fie derulabilă prin adăugarea următoarelor linii de cod CSS la elementul principal al coloanei 2:

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

Adăugați modulul de text nr. 1 în coloana 1

Adauga continut

Acum că am modificat toate setările rândurilor, putem începe să adăugăm modulele! Începeți cu un modul de text în coloana 1 și adăugați un conținut la alegere.

Setări text

Accesați setările de text ale modulului și efectuați câteva modificări.

• Font text: Lato
• Culoare: # 666666
• Dimensiune text: 1,6vw (desktop), 3vw (tabletă), 4vw (telefon)
• Înălțimea liniei de text: 2vw

Adăugați un modul divizor în coloana 1

Vizibilitate

Următorul modul pe care îl vom adăuga este un modul divizor. Asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Culoare

Apoi, accesați fila de design și schimbați culoarea.

• Culoare: # 5802ed

Dimensionare

Joacă-te și cu valorile de dimensionare.

• Greutatea divizorului: 4 px
• Lățime: 3vw (desktop), 6vw (tabletă), 9vw (telefon)
• Înălțime: 0px

Spațiere

Și adăugați niște umpluturi personalizate de sus și de jos pentru a crea spațiu.

• Marja superioară: 1vw (desktop), 3vw (tabletă), 4vw (telefon)
• Marja inferioară: 7vw

Adăugați modulul de text nr. 2 în coloana 1

Adauga continut

La al treilea modul, care este un alt modul de text. Aici, am adăugat un simbol (►) urmat de titlul primului capitol în caseta de conținut.

Adăugați un link

Conectăm întregul modul la un ID de ancoră pe care îl vom adăuga mai târziu la această postare.

• Adresa URL a modulului: https://yourwebsite.com/pagetitle/#chapter-1

Setări text

Continuați accesând setările de text și stilizați conținutul exact așa cum doriți.

• Font text: Lato
• Greutatea fontului textului: ușoară
• Culoarea textului: # 666666
• Dimensiune text: 1,3vw (desktop), 2vw (tabletă), 3,3vw (telefon)

Spațiere

Adăugați și o umplutură personalizată, de sus și de jos.

• Căptușeală superioară: 1vw
• Căptușeală inferioară: 1vw

Clona Text Module # 2 De două ori

După ce ați terminat de modificat modulul de text, clonați-l de două ori (sau până la câte capitole doriți să partajați).

Schimbați conținutul

Modificați conținutul fiecăruia dintre duplicate.

Schimbați linkurile

Împreună cu codul de ancorare de la sfârșitul adresei URL a linkului modulului. În acest caz, asta înseamnă adăugarea „# capitol-2” la primul duplicat și „# capitol-3” la al doilea.

Adăugați un modul de text în coloana 2

Adauga continut

Treceți la coloana următoare, care poate fi derulată. Aici vom folosi Module text pentru a adăuga diferite pagini ale previzualizării cărții. Începeți prin adăugarea primului modul de text cu un conținut la alegere.

Culoare de fundal

Apoi, accesați setările de fundal și adăugați o culoare albă de fundal.

• Culoare fundal: #ffffff

Setări text

Modificați și setările de text.

• Font text: Lato
• Dimensiune text: 0,8vw (desktop), 1,6vw (tabletă), 2,1vw (telefon)
• Înălțimea liniei de text: 1,7vw (desktop), 3,3vw (tabletă), 3,8vw (telefon)

Setări text H2

Joacă-te și cu setările de text H2.

• Rubrica 2 Font: Lato
• Rubrica 2 Greutate font: Greu
• Rubrica 2 Culoarea textului: # 5802ed
• Titlul 2 Dimensiune text: 2vw (desktop), 2,5vw (tabletă), 2,9vw (telefon)
• Titlul 2 Înălțimea liniei: 2,3vw

Spațiere

Continuați accesând setările de spațiere și adăugând următoarele valori de marjă și umplere personalizate:

• Marja superioară: 2vw (desktop), 7vw (tabletă), 10vw (telefon)
• Marja inferioară: 2vw (desktop), 7vw (tabletă), 10vw (telefon)
• Marja stângă: 5vw
• Marja dreaptă: 5vw
• Căptușeală superioară: 6vw
• Căptușeală inferioară: 6vw
• Garnitura stânga: 6vw
• Garnitura dreapta: 6vw

Box Shadow

Modelați modulul text adăugând o umbră de casetă subtilă.

• Puterea neclarității umbrei cutiei: 50 px
• Culoare umbră: rgba (0,0,0,0.09)

ID CSS

Continuați adăugând un ID CSS la modulul de text. Asigurați-vă că utilizați același ID CSS ca cel la care v-ați conectat în prima coloană a rândului.

• ID CSS: capitolul-1

Clonați modulul de text de două ori

După ce ați stilizat modulul text, clonați-l de câte ori doriți.

Schimbați conținutul

Modificați conținutul fiecărui duplicat al modulului text.

Schimbați ID-urile CSS

Împreună cu ID-urile CSS.

• ID CSS: capitolul-2
• ID CSS: capitolul-3

Adăugați un modul de text în coloana 3

Adauga continut

Trecem la următoarea și ultima coloană! Adăugați un modul text cu un conținut la alegere.

Setări text

Apoi, accesați fila de proiectare și modificați setările de text.

• Font text: Lato
• Greutate font text: greu
• Culoarea textului: #ffffff
• Dimensiune text: 2vw (desktop), 3vw (tabletă), 4vw (telefon)
• Înălțimea liniei de text: 2vw
• Orientare text: centru

Spațiere

Adăugați câteva umpluturi personalizate la stânga și la dreapta.

• Stânga: 2vw
• Dreapta: 2vw

Adăugați un modul buton la coloana 3

Adăugați o copie

Continuați adăugând un modul buton la a treia coloană cu o copie la alegere.

Aliniere

Schimbați alinierea butonului în continuare.

• Aliniere buton: centru

Setări buton

Modificați și setările butonului.

• Utilizați stiluri personalizate pentru buton: Da
• Dimensiune text buton: 1vw (desktop), 1,5vw (tabletă), 2,4vw (telefon)
• Culoarea textului butonului: # 5802ed
• Culoarea fundalului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Raza chenarului butonului: 10vw
• Distanța dintre litere și butoane: 0 px
• Greutatea fontului: Ultra Bold
• Stilul fontului: majuscule

Spațiere

Și adăugați câteva valori de marjă și umplere personalizate pentru a stiliza și poziționa modulul.

• Marja superioară: 2vw (desktop), 4vw (tabletă), 5vw (telefon)
• Căptușeală superioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală inferioară: 1vw (desktop), 2vw (tabletă), 3vw (telefon)
• Căptușeală stângă: 3vw (desktop), 7vw (tabletă), 9vw (telefon)
• Căptușeală dreaptă: 3vw (desktop), 7vw (tabletă), 9vw (telefon)

Bara de derulare a stilului

Deschideți Setări pagină

Ultima parte a acestui tutorial este dedicată stilării barei de derulare a celei de-a doua coloane. Indiferent dacă stilizați bara de derulare a coloanei sau nu, depinde în totalitate de dvs. Fără stil, nu schimbă nimic despre funcționalitate. Dacă decideți să stilizați bara de derulare, deschideți setările paginii.

Adăugați cod CSS

Apoi, accesați fila avansată și adăugați câteva CSS personalizate în caseta CSS personalizată și ați terminat!

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

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați o pagină de destinație uimitoare și eficientă de previzualizare a cărții, cu legături de ancorare la diferite părți sau capitole ale cărții dvs. și un CTA care să iasă în evidență. De asemenea, am distribuit aspectul JSON gratuit, astfel încât să puteți începe să îl adăugați imediat la orice site web pe care îl creați! Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.