Doriți să adăugați conținut teaser la o tabletă derulabilă pe Divi?
Adăugarea de conținut teaser la dvs site-ul web poate fi o strategie marketing efectiv. Acest lucru funcționează deosebit de bine pentru promova lucruri precum cărțile electronice. Le oferiți o previzualizare a conținutului, astfel încât să vrea mai mult.
În tutorialul de astăzi, vă vom arăta cum să prezentați conținutul teaser într-o tabletă drop-down în Divi.
Pentru a face acest lucru, vom profita de opțiunile încorporate ale Divi pentru a transforma o coloană într-un container drop-down (conceput să arate ca o tabletă) care poate include orice tip de conținut doriți.
Îl puteți folosi pentru promova primele capitole ale oricărei cărți electronice, vizualizați exemple de modele din portofoliul dvs. sau orice alt tip de conținut.
Să începem!
studiu
Iată o privire rapidă asupra tabletei cu conținut care poate fi derulat pe care o vom crea în acest tutorial.
Creați o pagină nouă cu Divi Builder
În tabloul de bord WordPress, accesați „Pagini > Adăugați nou”
Dați un titlu care să aibă sens pentru dvs., apoi faceți clic „Utilizați DiviBuilder”
Apoi faceți clic pe „Începe construirea”
Design de tabletă cu conținut teaser care poate fi derulat în Divi
Crearea containerului pentru tablete drop-down cu o coloană Divi
Adăugați un rând
Pentru a începe, creați un rând cu două coloane cu o secțiune obișnuită.
Setări pentru coloana 1
Culoare de fundal
Deschideți setările coloanei 1 și adăugați un fundal alb la coloană.
- Fundal: #ffffff
Granița și Marja
Accesați fila Amenajări opțiunea drop-down spațiere și modificați setările după cum urmează:
- Umplutură (sus, jos, stânga și dreapta): 25 px (sus, jos, stânga, dreapta)
Apoi trageți în jos opțiunea Frontieră și modificați setările în consecință:
- Colțuri rotunjite: 20px
- Lățimea chenarului: 30px
- Culoare chenar: #000000
Cutie de umbră
Pentru a oferi designului tabletei o oarecare profunzime, trageți în jos opțiunea Box Shadow și adăugați următoarea umbră casetă:
- Box Shadow: vezi captura de ecran
- Umbra casetei (orizontală și verticală) Poziție: 5 px
- Culoare umbră: #555555
Înălțimea și lățimea coloanei personalizate cu CSS
Cheia pentru derularea conținutului coloanei este de a-i oferi o înălțime definită. Acest lucru va face ca conținutul să depășească înălțimea coloanei.
De asemenea, dorim ca raportul de aspect al tabletei să rămână consistent, așa că este o idee bună să acordăm și coloanei o lățime maximă.
Pentru a da coloanei o înălțime și lățime personalizate, accesați fila Avansat și actualizați următoarele:
sub CSS personalizat, adăugați următorul CSS pentru afișajul desktop (Element principal):
height:650px;
max-width: 488px;
Apoi activați fila pentru alt afișaj și inserați următorul CSS personalizat pentru afișarea telefonului a elementului principal:
max-height: 500px;
max-width: 375px;
float:none;
margin: 0 auto;
Debordare verticală: derulați
După cum am menționat mai devreme, coloana are acum o înălțime definită care va face inevitabil să depășească conținutul coloanei pe verticală.
Pentru a vă asigura că conținutul debordant poate fi vizualizat derulând în jos pe coloană, setați opțiunea de depășire verticală a vizibilității la "sul". Pentru a face acest lucru, extindeți opțiunea Vizibilitate filă Avansat
- Depășire verticală: derulați
Adăugați conținut teaser în coloana drop-down
În acest moment, coloana (sau raftul) este gata pentru conținut. Puteți utiliza orice modul Divi din această coloană pentru a vă crea conținutul de previzualizare.
În acest exemplu, adăugăm conținut fals de cărți electronice care va consta dintr-un modul blurb (pentru a afișa îndemnul inițial la acțiune), un modul Imagine (pentru a afișa coperta cărții) și un modul Text (pentru a afișa unele capitole ale cărții electronice).
Derulare CTA (Call to Action) cu fundalul coperta cărții
Primul articol de conținut teaser pe care îl vom adăuga este un modul blurb care va servi drept apel la acțiune „defilați la previzualizare”.
Vom folosi o pictogramă de prezentare, un titlu și un fundal cu o copertă de carte ca imagine de fundal și o suprapunere cu gradient de culoare.
În coloana tabletă, adăugați un modul blurb.
Actualizați conținutul după cum urmează:
- Titlu: derulați pentru a citi un fragment
Opțiune drop-down „Imagine și pictogramă”
- Utilizați pictograma: Da
- Pictogramă: vezi captura de ecran
Apoi trageți în jos opțiunea Context și adăugați un gradient
- Culoare partea stângă: rbga(0,0,0,0,0.0)
- Culoare partea dreaptă: #ffffff
- Poziția de pornire: 20%
- Poziția finală: 85%
- Gradient pătrat deasupra imaginii de fundal: DA
Apoi adăugați imaginea de coperta cărții. Pentru cele mai bune rezultate, adăugați o imagine de aproximativ 600 x 850 pixeli .
În fila Design, actualizați următoarele stiluri pentru pictogramă și titlu:
- Culoare pictogramă: #000000
- Dimensiunea fontului pictogramei: 80px (desktop și tabletă), 70px (telefon)
- Font titlu: Montserrat
- Alinierea textului titlului: centrat
- Culoare text: #000000
Apoi putem muta pictograma și titlul în jos pe coloană adăugând o marjă de sus.
Pentru a mări și a spaționa materialul, actualizați următoarele:
- Înălțime: 100%
- Marja: 25 px (jos)
- Umplutură: 400 px (desktop și tabletă), 270 px (telefon)
Imaginea copertei cărții
Următoarea bucată de conținut teaser va fi o imagine cu coperta cărții. Pentru a adăuga o imagine, pur și simplu adăugați un modul Imagine sub modulul Blurb.
Apoi încărcați aceeași imagine folosită pentru fundalul blurb.
Conținutul previzualizării textului
Ultima noastră bucată de conținut teaser va fi textul care va include câteva capitole fictive din cartea noastră electronică. Pentru a adăuga textul, adăugați un nou modul Text sub imaginea anterioară.
Apoi inserați următorul cod HTML în fila text de corp:
<h3>Chapitre 1</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
<h3>Chapitre 2</h3>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
Sub fila Design, actualizați stilul titlului și spațierea după cum urmează (Titlul 3):
- Font: Montserrat
- Greutatea fontului: Ultra Bold
- Alinierea textului: centrat
- Înălțimea liniei: 1,3 em
- Căptușeală: 10% (sus și jos)
Câteva retușuri finale
Actualizați parametrii liniei
Cu conținutul la loc, trebuie să facem câteva ajustări la rând pentru a face designul mai receptiv. Deschideți Setări de linie și actualizați următoarele:
- Lățime: 100% (desktop), 90% (tabletă și telefon)
- Lățimea maximă: 1 px (desktop), 080 px (tabletă și telefon)
Adăugați conținut suplimentar la coloana 2
În acest moment, putem adăuga conținut suplimentar la coloana 2, dacă este necesar. Pentru acest exemplu, am adăugat un modul de text și un modul de buton și le-am personalizat similar cu designul prezentat în pachetul nostru de format de cărți electronice.
Descărcați DIVI acum!!!
Rezultat final
Acum să vedem rezultatul final.
Consultați conținutul drop-down disponibil în interiorul tabletei laptopului.
Și așa se adună designul pe ecranul tabletei și al telefonului.
Concluzie
Poate cel mai bun lucru despre acest design de tabletă cu defilare este versatilitatea sa. Deoarece tableta este în esență o coloană Divi, puteți utiliza orice număr de module Divi (text, imagine, buton) pentru a proiecta conținutul pe care doriți să îl prezentați.
Sper că acest lucru vă va ajuta data viitoare când va trebui să prezentați conținut teaser pe dvs site-ul web.
Dacă doriți să aflați mai multe despre Divi, nu ezitați să vizitați catalogul nostru de Tutoriale Divi. De asemenea, puteți consulta Cum se creează pagina de blog cu modulul Divi Blog
Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru realizarea proiectelor dvs. de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
